diff --git a/spine-js/example/index.html b/spine-js/example/index.html new file mode 100644 index 000000000..3e2c2fe0a --- /dev/null +++ b/spine-js/example/index.html @@ -0,0 +1,90 @@ + + + + + + +spine-canvas + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/spine-js/spine-canvas.js b/spine-js/spine-canvas.js new file mode 100644 index 000000000..65b75ba09 --- /dev/null +++ b/spine-js/spine-canvas.js @@ -0,0 +1,118 @@ +/****************************************************************************** + * Spine Runtimes Software License + * Version 2.1 + * + * Copyright (c) 2013, Esoteric Software + * All rights reserved. + * + * You are granted a perpetual, non-exclusive, non-sublicensable and + * non-transferable license to install, execute and perform the Spine Runtimes + * Software (the "Software") solely for internal use. Without the written + * permission of Esoteric Software (typically granted by licensing Spine), you + * may not (a) modify, translate, adapt or otherwise create derivative works, + * improvements of the Software or develop new applications using the Software + * or (b) remove, delete, alter or obscure any trademarks or any copyright, + * trademark, patent or other intellectual property or proprietary rights + * notices on or in the Software, including any copy thereof. Redistributions + * in binary or source form must include this license and terms. + * + * THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR + * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF + * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO + * EVENT SHALL ESOTERIC SOFTARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, + * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, + * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; + * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, + * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR + * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF + * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + *****************************************************************************/ + +spine.SkeletonRenderer = function (imagesPath) { + this.imagesPath = imagesPath; + this.lastTime = Date.now(); +}; + +spine.SkeletonRenderer.prototype = { + skeletonData: null, + state: null, + scale: 1, + skeleton: null, + + load: function(jsonText) { + var imagesPath = this.imagesPath; + var json = new spine.SkeletonJson({ + newRegionAttachment: function (skin, name, path) { + var image = new Image(); + image.src = imagesPath + path + ".png"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = image; + return attachment; + }, + newBoundingBoxAttachment: function (skin, name) { + return new spine.BoundingBoxAttachment(name); + } + }); + json.scale = this.scale; + this.skeletonData = json.readSkeletonData(JSON.parse(jsonText)); + spine.Bone.yDown = true; + + this.skeleton = new spine.Skeleton(this.skeletonData); + + var stateData = new spine.AnimationStateData(this.skeletonData); + this.state = new spine.AnimationState(stateData); + }, + + update: function() { + var now = Date.now(); + var delta = (now - this.lastTime) / 1000; + this.lastTime = now; + + this.state.update(delta); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + }, + + render: function(context) { + var skeleton = this.skeleton, drawOrder = skeleton.drawOrder; + context.translate(skeleton.x, skeleton.y); + + for (var i = 0, n = drawOrder.length; i < n; i++) { + var slot = drawOrder[i]; + var attachment = slot.attachment; + if (!(attachment instanceof spine.RegionAttachment)) continue; + var bone = slot.bone; + + var x = bone.worldX + attachment.x * bone.m00 + attachment.y * bone.m01; + var y = bone.worldY + attachment.x * bone.m10 + attachment.y * bone.m11; + var rotation = -(bone.worldRotation + attachment.rotation) * Math.PI / 180; + var w = attachment.width, h = attachment.height; + context.translate(x, y); + context.rotate(rotation); + context.drawImage(attachment.rendererObject, -w / 2, -h / 2, w, h); + context.rotate(-rotation); + context.translate(-x, -y); + } + + context.translate(-skeleton.x, -skeleton.y); + }, + + animate: function (id) { + var canvas = document.getElementById(id); + var context = canvas.getContext("2d"); + var requestAnimationFrame = window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + function (callback) { + window.setTimeout(callback, 1000 / 60); + }; + var self = this; + function renderFrame () { + context.clearRect(0, 0, canvas.width, canvas.height); + self.update(); + self.render(context); + requestAnimationFrame(renderFrame); + }; + renderFrame(); + } +}; diff --git a/spine-turbulenz/example/index.html b/spine-turbulenz/example/index.html index 897008170..66dd38414 100644 --- a/spine-turbulenz/example/index.html +++ b/spine-turbulenz/example/index.html @@ -1,3 +1,7 @@ + + + + - - - -spine-js +spine-turbulenz