diff --git a/spine-ts/webgl/demos/hoverboard.js b/spine-ts/webgl/demos/hoverboard.js index ad8128c87..643d7559f 100644 --- a/spine-ts/webgl/demos/hoverboard.js +++ b/spine-ts/webgl/demos/hoverboard.js @@ -46,16 +46,17 @@ var hoverboardDemo = function(loadingComplete, bgColor) { }); var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonJson = new spine.SkeletonJson(atlasLoader); - var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy-hover"]); + var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]); skeleton = new spine.Skeleton(skeletonData); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); - state.setAnimation(0, "idle", true); + state.setAnimation(0, "hoverboard", true); state.apply(skeleton); skeleton.updateWorldTransform(); var offset = new spine.Vector2(); bounds = new spine.Vector2(); skeleton.getBounds(offset, bounds, []); - for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null); + for (var i = 0; i < controlBones.length; i++) + hoverTargets.push(null); renderer.camera.position.x = offset.x + bounds.x / 2; renderer.camera.position.y = offset.y + bounds.y / 2; diff --git a/spine-ts/webgl/demos/imagechanges.js b/spine-ts/webgl/demos/imagechanges.js index 90feb0a2d..ef55c595e 100644 --- a/spine-ts/webgl/demos/imagechanges.js +++ b/spine-ts/webgl/demos/imagechanges.js @@ -35,7 +35,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) { function load () { timeKeeper.update(); if (assetManager.isLoadingComplete(DEMO_NAME)) { - skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]); + skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]); skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"]) setupUI(); loadingComplete(canvas, render); @@ -109,9 +109,8 @@ var imageChangesDemo = function(loadingComplete, bgColor) { for(var i = 0; i < sequenceSlots.length; i++) { var slot = sequenceSlots[i]; var index = skeleton.findSlotIndex(slot); - for (var name in skeleton.skin.attachments[index]) { + for (var name in skeleton.skin.attachments[index]) regions.push(skeleton.skin.attachments[index][name]); - } } return { @@ -138,17 +137,22 @@ var imageChangesDemo = function(loadingComplete, bgColor) { var offset = active.bounds.offset; var size = active.bounds.size; - var x = offset.x + size.x + 100, offsetY = offset.y; + var x = offset.x + size.x + 100, offsetY = offset.y, zoom = 1, rows, regionOffset = 0; if (activeSkeleton === "Alien") { - renderer.camera.position.x = offset.x + size.x; - renderer.camera.position.y = offset.y + size.y / 2; + renderer.camera.position.x = offset.x + size.x + 400; + renderer.camera.position.y = offset.y + size.y / 2 + 450; + x += 400; + zoom = 0.31; + rows = 3; + regionOffset = 3; } else { renderer.camera.position.x = offset.x + size.x; renderer.camera.position.y = offset.y + size.y / 2; x += 100; + rows = 3; } - renderer.camera.viewportWidth = size.x * 2.4; - renderer.camera.viewportHeight = size.y * 1.4; + renderer.camera.viewportWidth = size.x * 2.4 / zoom; + renderer.camera.viewportHeight = size.y * 1.4 / zoom; renderer.resize(spine.webgl.ResizeMode.Fit); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); @@ -172,39 +176,33 @@ var imageChangesDemo = function(loadingComplete, bgColor) { var y = offsetY; var slotsWidth = 0, slotsHeight = 0; - var slotSize = size.y / 3; + var slotSize = size.y / rows; var maxSlotWidth = 0; var j = 0; - 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); + for (var i = 0, n = active.regions.length; i < n; i++) { + var region = active.regions[(i + regionOffset) % n].region; + var width = region.rotate ? region.height : region.width; + var height = region.rotate ? region.width : region.height; + var scale = Math.min(slotSize / height, slotSize / width) / zoom; + renderer.drawRegion(region, x, y, width * scale, height * scale); var isVisible = false; 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) { - if (slot.attachment != null) { - if (slot.attachment.name === active.regions[i].name) { - isVisible = true; - break; - } - } - } + var slot = skeleton.findSlot(slotName); + if (slot && slot.attachment && slot.attachment.name === region.name) { + isVisible = true; + break; } if (isVisible) break; } - if (isVisible) renderer.rect(false, x, y, region.width * scale, region.height * scale, OUTLINE_COLOR); + if (isVisible) renderer.rect(false, x, y, width * scale, height * scale, OUTLINE_COLOR); - maxSlotWidth = Math.max(maxSlotWidth, region.width * scale); - y += slotSize; + maxSlotWidth = Math.max(maxSlotWidth, width * scale); + y += slotSize / zoom + 2; j++; - if (j == 3) { + if (j == rows) { x += maxSlotWidth + 10; maxSlotWidth = 0; y = offsetY; diff --git a/spine-ts/webgl/demos/transitions.js b/spine-ts/webgl/demos/transitions.js index 968aab432..1e38f0b13 100644 --- a/spine-ts/webgl/demos/transitions.js +++ b/spine-ts/webgl/demos/transitions.js @@ -45,9 +45,9 @@ var transitionsDemo = function(loadingComplete, bgColor) { skeletonNoMix = new spine.Skeleton(skeleton.data); state = createState(0.25); state.multipleMixing = true; - setAnimations(state, 0); + setAnimations(state, 0, true); stateNoMix = createState(0); - setAnimations(stateNoMix, -0.25); + setAnimations(stateNoMix, -0.25, true); state.apply(skeleton); skeleton.updateWorldTransform(); @@ -79,20 +79,18 @@ var transitionsDemo = function(loadingComplete, bgColor) { return state; } - function setAnimations(state, mix) { - state.addAnimation(0, "idle", true, 0.7); - state.addAnimation(0, "walk", true, 0.7); - state.addAnimation(0, "idle", true, 0.8); - state.addAnimation(0, "run", true, 0.7); - state.addAnimation(0, "idle", true, 0.8); + function setAnimations(state, mix, first) { + state.addAnimation(0, "idle", true, first ? 0 : 0.6); state.addAnimation(0, "walk", true, 0.6); - state.addAnimation(0, "run", true, 0.6); - state.addAnimation(0, "jump", false, 0.6); + state.addAnimation(0, "run", true, 1); + state.addAnimation(0, "walk", true, 1.2); + state.addAnimation(0, "run", true, 0.5); + state.addAnimation(0, "jump", false, 1); state.addAnimation(0, "run", true, mix); state.addAnimation(0, "jump", true, 0.5); - state.addAnimation(0, "run", true, mix).listener = { + state.addAnimation(0, "walk", true, mix).listener = { start: function (trackIndex) { - setAnimations(state, mix); + setAnimations(state, mix, false); } }; } @@ -134,7 +132,7 @@ var transitionsDemo = function(loadingComplete, bgColor) { state.update(delta); state.apply(skeleton); skeleton.updateWorldTransform(); - skeleton.x = -300; + skeleton.x = -200; skeleton.y = -100; renderer.drawSkeleton(skeleton, true);