diff --git a/spine-ts/webgl/demos/framebyframe.js b/spine-ts/webgl/demos/framebyframe.js index c88cd821d..c0230a0f2 100644 --- a/spine-ts/webgl/demos/framebyframe.js +++ b/spine-ts/webgl/demos/framebyframe.js @@ -144,8 +144,16 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { var offset = active.bounds.offset; var size = active.bounds.size; - renderer.camera.position.x = offset.x + size.x; - renderer.camera.position.y = offset.y + size.y / 2; + var x = offset.x + size.x + 100, offsetY = offset.y; + if (activeSkeleton === "Alien") { + renderer.camera.position.x = offset.x + size.x - 100; + renderer.camera.position.y = offset.y + size.y / 2 + 100; + offsetY += 125; + } else { + renderer.camera.position.x = offset.x + size.x; + renderer.camera.position.y = offset.y + size.y / 2; + x += 100; + } renderer.camera.viewportWidth = size.x * 2.4; renderer.camera.viewportHeight = size.y * 1.4; renderer.resize(spine.webgl.ResizeMode.Fit); @@ -169,8 +177,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { renderer.begin(); renderer.drawSkeleton(skeleton, true); - var x = offset.x + size.x + 100; - var y = offset.y; + var y = offsetY; var slotsWidth = 0, slotsHeight = 0; var slotSize = size.y / 3; var maxSlotWidth = 0; @@ -207,7 +214,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { if (j == 3) { x += maxSlotWidth + 10; maxSlotWidth = 0; - y = offset.y; + y = offsetY; j = 0; } } diff --git a/spine-ts/webgl/demos/meshes.js b/spine-ts/webgl/demos/meshes.js index a4d35682e..76b2fac4e 100644 --- a/spine-ts/webgl/demos/meshes.js +++ b/spine-ts/webgl/demos/meshes.js @@ -139,9 +139,9 @@ var meshesDemo = function(loadingComplete, bgColor) { var size = active.bounds.size; renderer.camera.position.x = offset.x + size.x / 2; - renderer.camera.position.y = offset.y + size.y / 2; - renderer.camera.viewportWidth = size.x * 1.2; - renderer.camera.viewportHeight = size.y * 1.2; + renderer.camera.position.y = offset.y + size.y / 2 + 20; + renderer.camera.viewportWidth = size.x * 1.1; + renderer.camera.viewportHeight = size.y * 1.1; renderer.resize(spine.webgl.ResizeMode.Fit); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); diff --git a/spine-ts/webgl/demos/skins.js b/spine-ts/webgl/demos/skins.js index 51032d12c..19849644e 100644 --- a/spine-ts/webgl/demos/skins.js +++ b/spine-ts/webgl/demos/skins.js @@ -211,10 +211,10 @@ var skinsDemo = function(loadingComplete, bgColor) { renderer.begin(); renderer.drawSkeleton(skeleton, true); var texture = assetManager.get(DEMO_NAME, "heroes.png"); - var width = bounds.x; + var width = bounds.x * 1.25; var scale = width / texture.getImage().width; var height = scale * texture.getImage().height; - renderer.drawTexture(texture, offset.x + bounds.x + 200, offset.y + bounds.y / 2 - height / 2 - 50, width, height); + renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height); renderer.end(); } diff --git a/spine-ts/webgl/demos/transitions.html b/spine-ts/webgl/demos/transitions.html index dfe5c2336..83483dd3e 100644 --- a/spine-ts/webgl/demos/transitions.html +++ b/spine-ts/webgl/demos/transitions.html @@ -6,17 +6,17 @@ - +
Time multiplier -

+

diff --git a/spine-ts/webgl/demos/transitions.js b/spine-ts/webgl/demos/transitions.js index 32fc34a75..35a375726 100644 --- a/spine-ts/webgl/demos/transitions.js +++ b/spine-ts/webgl/demos/transitions.js @@ -1,4 +1,4 @@ -var transitions = function(loadingComplete, bgColor) { +var transitionsDemo = function(loadingComplete, bgColor) { var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1); var canvas, gl, renderer, input, assetManager; @@ -12,10 +12,10 @@ var transitions = function(loadingComplete, bgColor) { if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - timeSlider = $("#transitions-timeslider").data("slider"); + timeSlider = $("#transitionsdemo-timeslider").data("slider"); timeSlider.set(0.5); - timeSliderLabel = $("#transitions-timeslider-label")[0]; - canvas = document.getElementById("transitions-canvas"); + timeSliderLabel = $("#transitionsdemo-timeslider-label")[0]; + canvas = document.getElementById("transitionsdemo-canvas"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); @@ -50,8 +50,8 @@ var transitions = function(loadingComplete, bgColor) { bounds = { offset: new spine.Vector2(), size: new spine.Vector2() }; skeleton.getBounds(bounds.offset, bounds.size); setupInput(); - $("#transitions-overlay").removeClass("overlay-hide"); - $("#transitions-overlay").addClass("overlay"); + $("#transitionsdemo-overlay").removeClass("overlay-hide"); + $("#transitionsdemo-overlay").addClass("overlay"); loadingComplete(canvas, render); } else { loadingScreen.draw(); diff --git a/spine-ts/webgl/demos/utils.js b/spine-ts/webgl/demos/utils.js index 50ad0ad03..0fdc3f0aa 100644 --- a/spine-ts/webgl/demos/utils.js +++ b/spine-ts/webgl/demos/utils.js @@ -75,7 +75,8 @@ var spineDemos = { value = percent; } function mouseEvent (e) { - var x = e.pageX || e.originalEvent.touches[0].pageX; + var x = e.pageX; + if (!x && e.originalEvent.touches) x = e.originalEvent.touches[0].pageX; var percent = Math.max(0, Math.min(1, (x - div.offset().left - hw / 2) / (div.width() - hw - 2))); positionHandle(percent); if (object.changed) object.changed(percent);