From 6808b9f44ae621054e0bbe6e98524ce995c41432 Mon Sep 17 00:00:00 2001 From: badlogic Date: Fri, 31 Mar 2017 12:27:41 +0200 Subject: [PATCH] [ts] Fixed up demos --- spine-ts/webgl/demos/hoverboard.js | 13 ++----- spine-ts/webgl/demos/imagechanges.js | 56 ++++++++++++++-------------- spine-ts/webgl/demos/meshes.js | 38 +++++++++---------- spine-ts/webgl/demos/skins.js | 2 +- spine-ts/webgl/demos/spritesheets.js | 2 +- spine-ts/webgl/demos/stretchyman.js | 46 +++++++++++------------ spine-ts/webgl/demos/transforms.js | 50 ++++++++++++------------- spine-ts/webgl/demos/transitions.js | 1 + spine-ts/webgl/demos/vine.js | 54 +++++++++++++-------------- 9 files changed, 128 insertions(+), 134 deletions(-) diff --git a/spine-ts/webgl/demos/hoverboard.js b/spine-ts/webgl/demos/hoverboard.js index cef63e9f8..8a8a7bcbc 100644 --- a/spine-ts/webgl/demos/hoverboard.js +++ b/spine-ts/webgl/demos/hoverboard.js @@ -50,7 +50,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) { skeleton.updateWorldTransform(); var offset = new spine.Vector2(); bounds = new spine.Vector2(); - skeleton.getBounds(offset, bounds); + skeleton.getBounds(offset, bounds, []); for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null); renderer.camera.position.x = offset.x + bounds.x / 2; @@ -139,15 +139,8 @@ var hoverboardDemo = function(loadingComplete, bgColor) { renderer.begin(); renderer.drawSkeleton(skeleton, true); - renderer.drawSkeletonDebug(skeleton, false, ["root"]); - gl.lineWidth(2); - for (var i = 0; i < controlBones.length; i++) { - var bone = skeleton.findBone(controlBones[i]); - var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER; - var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER; - renderer.circle(true, bone.worldX, bone.worldY, 20, colorInner); - renderer.circle(false, bone.worldX, bone.worldY, 20, colorOuter); - } + // renderer.drawSkeletonDebug(skeleton, false, ["root"]); + renderer.end(); gl.lineWidth(1); diff --git a/spine-ts/webgl/demos/imagechanges.js b/spine-ts/webgl/demos/imagechanges.js index 2af221d5f..3ae1ee519 100644 --- a/spine-ts/webgl/demos/imagechanges.js +++ b/spine-ts/webgl/demos/imagechanges.js @@ -1,8 +1,8 @@ var imageChangesDemo = function(loadingComplete, bgColor) { - var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1); + var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1); var canvas, gl, renderer, input, assetManager; - var skeleton, bounds; + var skeleton, bounds; var timeKeeper, loadingScreen; var skeletons = {}; var activeSkeleton = "Alien"; @@ -15,18 +15,18 @@ var imageChangesDemo = function(loadingComplete, bgColor) { function init () { canvas = document.getElementById("imagechanges-canvas"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; - gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); + gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); renderer = new spine.webgl.SceneRenderer(canvas, gl); assetManager = spineDemos.assetManager; - var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); }; + var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); }; assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png"); assetManager.loadText(DEMO_NAME, "atlas1.atlas"); - assetManager.loadJson(DEMO_NAME, "demos.json"); - timeKeeper = new spine.TimeKeeper(); + assetManager.loadJson(DEMO_NAME, "demos.json"); + timeKeeper = new spine.TimeKeeper(); loadingScreen = new spine.webgl.LoadingScreen(renderer); requestAnimationFrame(load); - } + } function load () { timeKeeper.update(); @@ -34,7 +34,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) { skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]); skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"]) setupUI(); - loadingComplete(canvas, render); + loadingComplete(canvas, render); } else { loadingScreen.draw(); requestAnimationFrame(load); @@ -43,7 +43,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) { function setupUI() { playButton = $("#imagechanges-playbutton"); - var playButtonUpdate = function () { + var playButtonUpdate = function () { isPlaying = !isPlaying; if (isPlaying) playButton.addClass("pause").removeClass("play"); @@ -55,7 +55,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) { timeLine = $("#imagechanges-timeline").data("slider"); timeLine.changed = function (percent) { - if (isPlaying) playButton.click(); + if (isPlaying) playButton.click(); if (!isPlaying) { var active = skeletons[activeSkeleton]; var animationDuration = active.state.getCurrent(0).animation.duration; @@ -63,11 +63,11 @@ var imageChangesDemo = function(loadingComplete, bgColor) { active.state.update(time - active.playTime); active.state.apply(active.skeleton); active.skeleton.updateWorldTransform(); - active.playTime = time; + active.playTime = time; } }; - var list = $("#imagechanges-skeleton"); + var list = $("#imagechanges-skeleton"); for (var skeletonName in skeletons) { var option = $(""); option.attr("value", skeletonName).text(skeletonName); @@ -84,7 +84,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) { function loadSkeleton(name, animation, sequenceSlots) { var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) { - return assetManager.get(DEMO_NAME, path); + return assetManager.get(DEMO_NAME, path); }); var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonJson = new spine.SkeletonJson(atlasLoader); @@ -93,16 +93,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) { skeleton.setSkinByName("default"); var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData)); - var anim = skeletonData.findAnimation(animation); + var anim = skeletonData.findAnimation(animation); state.setAnimation(0, animation, true); if (name === "alien") { - state.update(anim.duration / 2.5); + state.update(anim.duration / 2.5); } state.apply(skeleton); - skeleton.updateWorldTransform(); + skeleton.updateWorldTransform(); var offset = new spine.Vector2(); var size = new spine.Vector2(); - skeleton.getBounds(offset, size); + skeleton.getBounds(offset, size, []); if (name === "alien") { state.update(-anim.duration / 2.5); } @@ -110,16 +110,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) { var regions = []; for(var i = 0; i < sequenceSlots.length; i++) { var slot = sequenceSlots[i]; - var index = skeleton.findSlotIndex(slot); + var index = skeleton.findSlotIndex(slot); for (var name in skeleton.skin.attachments[index]) { - regions.push(skeleton.skin.attachments[index][name]); + regions.push(skeleton.skin.attachments[index][name]); } } return { atlas: atlas, - skeleton: skeleton, - state: state, + skeleton: skeleton, + state: state, playTime: 0, bounds: { offset: offset, @@ -132,7 +132,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) { function render () { timeKeeper.update(); - var delta = timeKeeper.delta; + var delta = timeKeeper.delta; var active = skeletons[activeSkeleton]; var skeleton = active.skeleton; @@ -159,7 +159,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) { if (isPlaying) { var animationDuration = state.getCurrent(0).animation.duration; - active.playTime += delta; + active.playTime += delta; while (active.playTime >= animationDuration) { active.playTime -= animationDuration; } @@ -170,15 +170,15 @@ var imageChangesDemo = function(loadingComplete, bgColor) { skeleton.updateWorldTransform(); } - renderer.begin(); + renderer.begin(); renderer.drawSkeleton(skeleton, true); var y = offsetY; var slotsWidth = 0, slotsHeight = 0; var slotSize = size.y / 3; - var maxSlotWidth = 0; + var maxSlotWidth = 0; var j = 0; - for (var i = 0; i < active.regions.length; i++) { + for (var i = 0; i < active.regions.length; i++) { var region = active.regions[i].region; var scale = Math.min(slotSize / region.height, slotSize / region.width); renderer.drawRegion(region, x, y, region.width * scale, region.height * scale); @@ -187,7 +187,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) { for (var ii = 0; ii < active.slots.length; ii++) { var slotName = active.slots[ii]; var slotIndex = skeleton.findSlotIndex(slotName); - + for (var iii = 0; iii < skeleton.drawOrder.length; iii++) { var slot = skeleton.drawOrder[iii]; if (slot.data.index == slotIndex) { @@ -212,7 +212,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) { maxSlotWidth = 0; y = offsetY; j = 0; - } + } } renderer.end(); diff --git a/spine-ts/webgl/demos/meshes.js b/spine-ts/webgl/demos/meshes.js index aea802e5a..6d44f7931 100644 --- a/spine-ts/webgl/demos/meshes.js +++ b/spine-ts/webgl/demos/meshes.js @@ -1,6 +1,6 @@ var meshesDemo = function(loadingComplete, bgColor) { var canvas, gl, renderer, input, assetManager; - var skeleton, bounds; + var skeleton, bounds; var timeKeeper, loadingScreen; var skeletons = {}; var activeSkeleton = "Orange Girl"; @@ -13,19 +13,19 @@ var meshesDemo = function(loadingComplete, bgColor) { function init () { canvas = document.getElementById("meshes-canvas"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; - gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); + gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer.skeletonDebugRenderer.drawRegionAttachments = false; assetManager = spineDemos.assetManager; - var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); }; + var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); }; assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png"); assetManager.loadText(DEMO_NAME, "atlas2.atlas"); - assetManager.loadJson(DEMO_NAME, "demos.json"); - timeKeeper = new spine.TimeKeeper(); + assetManager.loadJson(DEMO_NAME, "demos.json"); + timeKeeper = new spine.TimeKeeper(); loadingScreen = new spine.webgl.LoadingScreen(renderer); requestAnimationFrame(load); - } + } function load () { timeKeeper.update(); @@ -43,7 +43,7 @@ var meshesDemo = function(loadingComplete, bgColor) { function setupUI() { playButton = $("#meshes-playbutton"); - var playButtonUpdate = function () { + var playButtonUpdate = function () { isPlaying = !isPlaying; if (isPlaying) playButton.addClass("pause").removeClass("play"); @@ -55,7 +55,7 @@ var meshesDemo = function(loadingComplete, bgColor) { timeLine = $("#meshes-timeline").data("slider"); timeLine.changed = function (percent) { - if (isPlaying) playButton.click(); + if (isPlaying) playButton.click(); if (!isPlaying) { var active = skeletons[activeSkeleton]; var animationDuration = active.state.getCurrent(0).animation.duration; @@ -63,11 +63,11 @@ var meshesDemo = function(loadingComplete, bgColor) { active.state.update(time - active.playTime); active.state.apply(active.skeleton); active.skeleton.updateWorldTransform(); - active.playTime = time; + active.playTime = time; } }; - var list = $("#meshes-skeleton"); + var list = $("#meshes-skeleton"); for (var skeletonName in skeletons) { var option = $(""); option.attr("value", skeletonName).text(skeletonName); @@ -96,7 +96,7 @@ var meshesDemo = function(loadingComplete, bgColor) { function loadSkeleton(name, animation, sequenceSlots) { var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { - return assetManager.get(DEMO_NAME, path); + return assetManager.get(DEMO_NAME, path); }); var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonJson = new spine.SkeletonJson(atlasLoader); @@ -107,26 +107,26 @@ var meshesDemo = function(loadingComplete, bgColor) { var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData)); state.setAnimation(0, animation, true); state.apply(skeleton); - skeleton.updateWorldTransform(); + skeleton.updateWorldTransform(); var offset = new spine.Vector2(); var size = new spine.Vector2(); - skeleton.getBounds(offset, size); + skeleton.getBounds(offset, size, []); return { atlas: atlas, - skeleton: skeleton, - state: state, + skeleton: skeleton, + state: state, playTime: 0, bounds: { offset: offset, size: size - } + } }; } function render () { timeKeeper.update(); - var delta = timeKeeper.delta; + var delta = timeKeeper.delta; var active = skeletons[activeSkeleton]; var skeleton = active.skeleton; @@ -145,7 +145,7 @@ var meshesDemo = function(loadingComplete, bgColor) { if (isPlaying) { var animationDuration = state.getCurrent(0).animation.duration; - active.playTime += delta; + active.playTime += delta; while (active.playTime >= animationDuration) { active.playTime -= animationDuration; } @@ -156,7 +156,7 @@ var meshesDemo = function(loadingComplete, bgColor) { skeleton.updateWorldTransform(); } - renderer.begin(); + renderer.begin(); renderer.drawSkeleton(skeleton, true); renderer.drawSkeletonDebug(skeleton); renderer.end(); diff --git a/spine-ts/webgl/demos/skins.js b/spine-ts/webgl/demos/skins.js index ee64f03a0..9169e59eb 100644 --- a/spine-ts/webgl/demos/skins.js +++ b/spine-ts/webgl/demos/skins.js @@ -47,7 +47,7 @@ var skinsDemo = function(loadingComplete, bgColor) { skeleton.updateWorldTransform(); offset = new spine.Vector2(); bounds = new spine.Vector2(); - skeleton.getBounds(offset, bounds); + skeleton.getBounds(offset, bounds, []); setupUI(); setupInput(); loadingComplete(canvas, render); diff --git a/spine-ts/webgl/demos/spritesheets.js b/spine-ts/webgl/demos/spritesheets.js index c68cfeb12..ebdbe6253 100644 --- a/spine-ts/webgl/demos/spritesheets.js +++ b/spine-ts/webgl/demos/spritesheets.js @@ -50,7 +50,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) { skeleton.updateWorldTransform(); offset = new spine.Vector2(); bounds = new spine.Vector2(); - skeleton.getBounds(offset, bounds); + skeleton.getBounds(offset, bounds, []); skeleton.x -= 60; skeletonSeq = new spine.Skeleton(skeletonData); diff --git a/spine-ts/webgl/demos/stretchyman.js b/spine-ts/webgl/demos/stretchyman.js index f4e7dd669..c4d074f53 100644 --- a/spine-ts/webgl/demos/stretchyman.js +++ b/spine-ts/webgl/demos/stretchyman.js @@ -5,7 +5,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) { var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8); var canvas, gl, renderer, input, assetManager; - var skeleton, bounds, state; + var skeleton, bounds, state; var timeKeeper, loadingScreen; var target = null; var hoverTargets = []; @@ -14,7 +14,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) { "front leg controller", "back arm controller", "front arm controller", - "head controller", + "head controller", "hip controller" ]; var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); @@ -28,16 +28,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) { function init () { canvas = document.getElementById("stretchyman-canvas"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; - gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); + gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); renderer = new spine.webgl.SceneRenderer(canvas, gl); assetManager = spineDemos.assetManager; var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); }; - input = new spine.webgl.Input(canvas); + input = new spine.webgl.Input(canvas); assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png"); assetManager.loadText(DEMO_NAME, "atlas2.atlas"); - assetManager.loadJson(DEMO_NAME, "demos.json"); - timeKeeper = new spine.TimeKeeper(); + assetManager.loadJson(DEMO_NAME, "demos.json"); + timeKeeper = new spine.TimeKeeper(); loadingScreen = new spine.webgl.LoadingScreen(renderer); requestAnimationFrame(load); } @@ -46,7 +46,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) { timeKeeper.update(); if (assetManager.isLoadingComplete(DEMO_NAME)) { var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { - return assetManager.get(DEMO_NAME, path); + return assetManager.get(DEMO_NAME, path); }); var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonJson = new spine.SkeletonJson(atlasLoader); @@ -56,10 +56,10 @@ var stretchymanDemo = function(loadingComplete, bgColor) { skeleton.updateWorldTransform(); var offset = new spine.Vector2(); bounds = new spine.Vector2(); - skeleton.getBounds(offset, bounds); + skeleton.getBounds(offset, bounds, []); for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); - state.setAnimation(0, "idle", true); + state.setAnimation(0, "idle", true); renderer.camera.position.x = offset.x + bounds.x / 2; renderer.camera.position.y = offset.y + bounds.y / 2; @@ -77,25 +77,25 @@ var stretchymanDemo = function(loadingComplete, bgColor) { } } - function setupUI() { + function setupUI() { var checkbox = $("#stretchyman-drawbones"); renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawBones = false; checkbox.change(function() { renderer.skeletonDebugRenderer.drawPaths = this.checked; - renderer.skeletonDebugRenderer.drawBones = this.checked; + renderer.skeletonDebugRenderer.drawBones = this.checked; }); } function setupInput (){ input.addListener({ down: function(x, y) { - for (var i = 0; i < controlBones.length; i++) { - var bone = skeleton.findBone(controlBones[i]); - renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); + for (var i = 0; i < controlBones.length; i++) { + var bone = skeleton.findBone(controlBones[i]); + renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) { target = bone; - } + } } }, up: function(x, y) { @@ -117,16 +117,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) { } } }, - moved: function (x, y) { - for (var i = 0; i < controlBones.length; i++) { - var bone = skeleton.findBone(controlBones[i]); - renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); + moved: function (x, y) { + for (var i = 0; i < controlBones.length; i++) { + var bone = skeleton.findBone(controlBones[i]); + renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) { hoverTargets[i] = bone; } else { hoverTargets[i] = null; } - } + } } }); } @@ -153,7 +153,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) { function render () { timeKeeper.update(); - var delta = timeKeeper.delta; + var delta = timeKeeper.delta; state.update(delta); state.apply(skeleton); @@ -168,14 +168,14 @@ var stretchymanDemo = function(loadingComplete, bgColor) { var angle = Math.atan2(headControl.worldY - hipControl.worldY, headControl.worldX - hipControl.worldX) * spine.MathUtils.radDeg; angle = (angle - 90) * 2.5; head.rotation = head.data.rotation + Math.min(90, Math.abs(angle)) * Math.sign(angle); - skeleton.updateWorldTransform(); + skeleton.updateWorldTransform(); renderer.camera.viewportWidth = bounds.x * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2; renderer.resize(spine.webgl.ResizeMode.Fit); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); - gl.clear(gl.COLOR_BUFFER_BIT); + gl.clear(gl.COLOR_BUFFER_BIT); renderer.begin(); renderer.drawSkeleton(skeleton, true); diff --git a/spine-ts/webgl/demos/transforms.js b/spine-ts/webgl/demos/transforms.js index f7c8f393a..63da761cb 100644 --- a/spine-ts/webgl/demos/transforms.js +++ b/spine-ts/webgl/demos/transforms.js @@ -5,12 +5,12 @@ var transformsDemo = function(loadingComplete, bgColor) { var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8); var canvas, gl, renderer, input, assetManager; - var skeleton, state, bounds; - var timeKeeper, loadingScreen; - var rotateHandle; + var skeleton, state, bounds; + var timeKeeper, loadingScreen; + var rotateHandle; var target = null; var hoverTargets = [null, null, null]; - var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"]; + var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"]; var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(); var lastRotation = 0; var mix, lastOffset = 0, lastMix = 0.5; @@ -22,16 +22,16 @@ var transformsDemo = function(loadingComplete, bgColor) { function init () { canvas = document.getElementById("transforms-canvas"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; - gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); + gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); renderer = new spine.webgl.SceneRenderer(canvas, gl); assetManager = spineDemos.assetManager; - var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); }; + var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); }; assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png"); assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadJson(DEMO_NAME, "demos.json"); input = new spine.webgl.Input(canvas); - timeKeeper = new spine.TimeKeeper(); + timeKeeper = new spine.TimeKeeper(); loadingScreen = new spine.webgl.LoadingScreen(renderer); requestAnimationFrame(load); } @@ -40,7 +40,7 @@ var transformsDemo = function(loadingComplete, bgColor) { timeKeeper.update(); if (assetManager.isLoadingComplete(DEMO_NAME)) { var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { - return assetManager.get(DEMO_NAME, path); + return assetManager.get(DEMO_NAME, path); }); var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonJson = new spine.SkeletonJson(atlasLoader); @@ -50,11 +50,11 @@ var transformsDemo = function(loadingComplete, bgColor) { skeleton.updateWorldTransform(); var offset = new spine.Vector2(); bounds = new spine.Vector2(); - skeleton.getBounds(offset, bounds); + skeleton.getBounds(offset, bounds, []); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); - skeleton.setToSetupPose(); + skeleton.setToSetupPose(); skeleton.updateWorldTransform(); - rotateHandle = skeleton.findBone("rotate-handle"); + rotateHandle = skeleton.findBone("rotate-handle"); renderer.camera.position.x = offset.x + bounds.x / 2; renderer.camera.position.y = offset.y + bounds.y / 2; @@ -62,7 +62,7 @@ var transformsDemo = function(loadingComplete, bgColor) { renderer.skeletonDebugRenderer.drawRegionAttachments = false; renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false; - + setupUI(); setupInput(); @@ -79,7 +79,7 @@ var transformsDemo = function(loadingComplete, bgColor) { var val = percent * 360 - 180; var delta = val - lastOffset; lastOffset = val; - skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta; + skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta; skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta; $("#transforms-rotationoffset-label").text(Math.round(val) + "°"); }; @@ -103,21 +103,21 @@ var transformsDemo = function(loadingComplete, bgColor) { var wheel1 = skeleton.findBone("wheel1overlay"); var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize(); var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees; - if (v.y < 0) angle = 360 - angle; + if (v.y < 0) angle = 360 - angle; return angle; } input.addListener({ - down: function(x, y) { + down: function(x, y) { renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); - for (var i = 0; i < controlBones.length; i++) { - var bone = skeleton.findBone(controlBones[i]); + for (var i = 0; i < controlBones.length; i++) { + var bone = skeleton.findBone(controlBones[i]); if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) { target = bone; if (target === rotateHandle) lastRotation = getRotation(x, y); - } - } + } + } }, - up: function(x, y) { + up: function(x, y) { target = null; }, dragged: function(x, y) { @@ -140,10 +140,10 @@ var transformsDemo = function(loadingComplete, bgColor) { } } }, - moved: function (x, y) { + moved: function (x, y) { renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); for (var i = 0; i < controlBones.length; i++) { - var bone = skeleton.findBone(controlBones[i]); + var bone = skeleton.findBone(controlBones[i]); if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) { hoverTargets[i] = bone; } else { @@ -171,12 +171,12 @@ var transformsDemo = function(loadingComplete, bgColor) { renderer.drawSkeleton(skeleton, true); renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]); gl.lineWidth(2); - for (var i = 0; i < controlBones.length; i++) { + for (var i = 0; i < controlBones.length; i++) { var bone = skeleton.findBone(controlBones[i]); var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER; var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER; - renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner); - renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter); + renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner); + renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter); } gl.lineWidth(1); renderer.end(); diff --git a/spine-ts/webgl/demos/transitions.js b/spine-ts/webgl/demos/transitions.js index 7cc32509f..294d5cde3 100644 --- a/spine-ts/webgl/demos/transitions.js +++ b/spine-ts/webgl/demos/transitions.js @@ -40,6 +40,7 @@ var transitionsDemo = function(loadingComplete, bgColor) { skeleton = loadSkeleton("spineboy"); skeletonNoMix = new spine.Skeleton(skeleton.data); state = createState(0.25); + state.multipleMixing = true; setAnimations(state, 0); stateNoMix = createState(0); setAnimations(stateNoMix, -0.25); diff --git a/spine-ts/webgl/demos/vine.js b/spine-ts/webgl/demos/vine.js index 6bd0e3a1c..59a0a80c2 100644 --- a/spine-ts/webgl/demos/vine.js +++ b/spine-ts/webgl/demos/vine.js @@ -5,7 +5,7 @@ var vineDemo = function(loadingComplete, bgColor) { var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8); var canvas, gl, renderer, input, assetManager; - var skeleton, state, bounds; + var skeleton, state, bounds; var timeKeeper, loadingScreen; var target = null; var hoverTargets = [null, null, null, null, null, null]; @@ -20,16 +20,16 @@ var vineDemo = function(loadingComplete, bgColor) { function init () { canvas = document.getElementById("vine-canvas"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; - gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); + gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); - renderer = new spine.webgl.SceneRenderer(canvas, gl); + renderer = new spine.webgl.SceneRenderer(canvas, gl); input = new spine.webgl.Input(canvas); assetManager = spineDemos.assetManager; var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); }; assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png"); assetManager.loadText(DEMO_NAME, "atlas2.atlas"); - assetManager.loadJson(DEMO_NAME, "demos.json"); - timeKeeper = new spine.TimeKeeper(); + assetManager.loadJson(DEMO_NAME, "demos.json"); + timeKeeper = new spine.TimeKeeper(); loadingScreen = new spine.webgl.LoadingScreen(renderer); requestAnimationFrame(load); } @@ -38,7 +38,7 @@ var vineDemo = function(loadingComplete, bgColor) { timeKeeper.update(); if (assetManager.isLoadingComplete(DEMO_NAME)) { var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { - return assetManager.get(DEMO_NAME, path); + return assetManager.get(DEMO_NAME, path); }); var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonJson = new spine.SkeletonJson(atlasLoader); @@ -48,7 +48,7 @@ var vineDemo = function(loadingComplete, bgColor) { skeleton.updateWorldTransform(); var offset = new spine.Vector2(); bounds = new spine.Vector2(); - skeleton.getBounds(offset, bounds); + skeleton.getBounds(offset, bounds, []); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); state.setAnimation(0, "animation", true); state.apply(skeleton); @@ -65,14 +65,14 @@ var vineDemo = function(loadingComplete, bgColor) { loadingComplete(canvas, render); } else { - loadingScreen.draw(); + loadingScreen.draw(); requestAnimationFrame(load); } } function setupUI() { playButton = $("#vine-playbutton"); - var playButtonUpdate = function () { + var playButtonUpdate = function () { isPlaying = !isPlaying; if (isPlaying) playButton.addClass("pause").removeClass("play"); @@ -87,11 +87,11 @@ var vineDemo = function(loadingComplete, bgColor) { if (isPlaying) playButton.click(); if (!isPlaying) { var animationDuration = state.getCurrent(0).animation.duration; - time = animationDuration * percent; + time = animationDuration * percent; state.update(time - playTime); state.apply(skeleton); skeleton.updateWorldTransform(); - playTime = time; + playTime = time; } }; @@ -100,19 +100,19 @@ var vineDemo = function(loadingComplete, bgColor) { var checkbox = $("#vine-drawbones"); checkbox.change(function() { renderer.skeletonDebugRenderer.drawPaths = this.checked; - renderer.skeletonDebugRenderer.drawBones = this.checked; + renderer.skeletonDebugRenderer.drawBones = this.checked; }); } function setupInput() { input.addListener({ down: function(x, y) { - for (var i = 0; i < controlBones.length; i++) { - var bone = skeleton.findBone(controlBones[i]); - renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); + for (var i = 0; i < controlBones.length; i++) { + var bone = skeleton.findBone(controlBones[i]); + renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) { target = bone; - } + } } }, up: function(x, y) { @@ -132,15 +132,15 @@ var vineDemo = function(loadingComplete, bgColor) { } }, moved: function (x, y) { - for (var i = 0; i < controlBones.length; i++) { - var bone = skeleton.findBone(controlBones[i]); - renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); + for (var i = 0; i < controlBones.length; i++) { + var bone = skeleton.findBone(controlBones[i]); + renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) { hoverTargets[i] = bone; } else { hoverTargets[i] = null; } - } + } } }); } @@ -151,14 +151,14 @@ var vineDemo = function(loadingComplete, bgColor) { if (isPlaying) { var animationDuration = state.getCurrent(0).animation.duration; - playTime += delta; + playTime += delta; while (playTime >= animationDuration) { playTime -= animationDuration; } timeLine.set(playTime / animationDuration); state.update(delta); - state.apply(skeleton); + state.apply(skeleton); } skeleton.updateWorldTransform(); @@ -168,18 +168,18 @@ var vineDemo = function(loadingComplete, bgColor) { renderer.resize(spine.webgl.ResizeMode.Fit); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); - gl.clear(gl.COLOR_BUFFER_BIT); + gl.clear(gl.COLOR_BUFFER_BIT); - renderer.begin(); + renderer.begin(); renderer.drawSkeleton(skeleton, true); renderer.drawSkeletonDebug(skeleton); gl.lineWidth(2); - for (var i = 0; i < controlBones.length; i++) { + for (var i = 0; i < controlBones.length; i++) { var bone = skeleton.findBone(controlBones[i]); var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER; var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER; - renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner); - renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter); + renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner); + renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter); } gl.lineWidth(1); renderer.end();