From b1d92aecf8eb4fbec80e8703c21cab1d9bd2600d Mon Sep 17 00:00:00 2001 From: NathanSweet Date: Mon, 5 Sep 2016 19:52:48 +0200 Subject: [PATCH 01/14] [ts] Demo CSS upgrade. --- spine-ts/webgl/demos/demos.css | 33 ++++++++++++++++--- spine-ts/webgl/demos/framebyframe.html | 9 +++-- spine-ts/webgl/demos/ikconstraint.html | 5 +-- spine-ts/webgl/demos/meshes.html | 15 ++++----- spine-ts/webgl/demos/pathconstraint.html | 11 +++---- spine-ts/webgl/demos/skins.html | 13 ++++---- spine-ts/webgl/demos/spritesheet.html | 13 ++++---- spine-ts/webgl/demos/stretchy.html | 7 ++-- spine-ts/webgl/demos/tank.html | 11 +++---- spine-ts/webgl/demos/transformconstraint.html | 13 ++++---- spine-ts/webgl/demos/transitions.html | 9 +++-- 11 files changed, 78 insertions(+), 61 deletions(-) diff --git a/spine-ts/webgl/demos/demos.css b/spine-ts/webgl/demos/demos.css index 2701203a1..343868faa 100644 --- a/spine-ts/webgl/demos/demos.css +++ b/spine-ts/webgl/demos/demos.css @@ -1,18 +1,43 @@ body, html { margin: 0; - padding: 0; height: 100%; font-family: Tahoma; font-size: 11pt; } -canvas { - position: absolute; width: 100% ;height: 100%; +body { + padding: 15px; +} +br { + display: block; + content: ""; + margin-top: 15px; +} +.aspect { + margin-bottom: 15px; + max-width: 800px; + text-align: center; +} +.aspect div { + position: relative; + padding-bottom: 70.14%; +} +.aspect canvas { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + border: 1px solid black; } .slider { - width: 50%; + width: 100%; + max-width: 800px; border-radius: 3px; text-align: left; transform: translateZ(0); + background: #222; } .slider, .slider.filled span { height: 15px; diff --git a/spine-ts/webgl/demos/framebyframe.html b/spine-ts/webgl/demos/framebyframe.html index e0c85fe3c..f89b02101 100644 --- a/spine-ts/webgl/demos/framebyframe.html +++ b/spine-ts/webgl/demos/framebyframe.html @@ -1,4 +1,5 @@ +Frame-by-frame - Spine Demo @@ -6,13 +7,11 @@ -
-
-
- +
-
+
+
@@ -6,9 +7,9 @@ -
-
Display Bones
+
+ Display Bones
@@ -6,15 +7,13 @@ -
-
-
-
Draw bones
-
Draw triangles
- -
-
+
+
+
+
+ Draw bones
+ Draw triangles
@@ -6,13 +7,11 @@ -
-
-
Display bones & path
- -
-
+
+
+
+ Display bones & path
@@ -6,14 +7,12 @@ -
-
-
- - -
Randomize skin
-
+
+
+ +
+ Randomize skin
@@ -6,14 +7,12 @@ -
-
- - -
Time multiplier -
-
+
+ +
+Time multiplier +
@@ -6,11 +7,9 @@ -
-
-
Display bones
-
+
+ Display bones
@@ -6,13 +7,11 @@ -
-
-
Display bones
- -
-
+
+
+
+ Display bones
@@ -6,14 +7,12 @@ -
-
- Rotation offset -
- Translation mix -
-
+
+Rotation offset +

+Translation mix +
@@ -6,12 +7,10 @@ -
-
- Time multiplier -

-
+
+Time multiplier +
- +
From 4a2ba83aa4b5df45857887bbf5732cb2646e0173 Mon Sep 17 00:00:00 2001 From: NathanSweet Date: Tue, 6 Sep 2016 12:46:25 +0200 Subject: [PATCH 03/14] [ts] Demo refactoring. --- spine-ts/README.md | 19 +++++- spine-ts/webgl/demos/framebyframe.html | 23 ------- .../{ikconstraint.html => hoverboard.html} | 8 +-- .../demos/{ikconstraint.js => hoverboard.js} | 8 +-- spine-ts/webgl/demos/imagechanges.html | 23 +++++++ .../{framebyframe.js => imagechanges.js} | 14 ++--- spine-ts/webgl/demos/meshes.html | 12 ++-- spine-ts/webgl/demos/meshes.js | 14 ++--- spine-ts/webgl/demos/pathconstraint.html | 23 ------- spine-ts/webgl/demos/skins.html | 10 +-- spine-ts/webgl/demos/skins.js | 14 ++--- spine-ts/webgl/demos/spritesheet.html | 24 ------- spine-ts/webgl/demos/spritesheets.html | 24 +++++++ .../demos/{spritesheet.js => spritesheets.js} | 62 ++++++++++--------- .../demos/{stretchy.html => stretchyman.html} | 8 +-- .../demos/{stretchy.js => stretchyman.js} | 8 +-- spine-ts/webgl/demos/tank.html | 8 +-- spine-ts/webgl/demos/tank.js | 8 +-- ...ansformconstraint.html => transforms.html} | 10 +-- .../{transformconstraint.js => transforms.js} | 20 +++--- spine-ts/webgl/demos/transitions.html | 4 +- spine-ts/webgl/demos/transitions.js | 14 ++--- spine-ts/webgl/demos/vine.html | 23 +++++++ .../demos/{pathconstraint.js => vine.js} | 12 ++-- 24 files changed, 206 insertions(+), 187 deletions(-) delete mode 100644 spine-ts/webgl/demos/framebyframe.html rename spine-ts/webgl/demos/{ikconstraint.html => hoverboard.html} (56%) rename spine-ts/webgl/demos/{ikconstraint.js => hoverboard.js} (96%) create mode 100644 spine-ts/webgl/demos/imagechanges.html rename spine-ts/webgl/demos/{framebyframe.js => imagechanges.js} (94%) delete mode 100644 spine-ts/webgl/demos/pathconstraint.html delete mode 100644 spine-ts/webgl/demos/spritesheet.html create mode 100644 spine-ts/webgl/demos/spritesheets.html rename spine-ts/webgl/demos/{spritesheet.js => spritesheets.js} (78%) rename spine-ts/webgl/demos/{stretchy.html => stretchyman.html} (56%) rename spine-ts/webgl/demos/{stretchy.js => stretchyman.js} (97%) rename spine-ts/webgl/demos/{transformconstraint.html => transforms.html} (53%) rename spine-ts/webgl/demos/{transformconstraint.js => transforms.js} (91%) create mode 100644 spine-ts/webgl/demos/vine.html rename spine-ts/webgl/demos/{pathconstraint.js => vine.js} (95%) diff --git a/spine-ts/README.md b/spine-ts/README.md index c93ee1b9c..198dffbc2 100644 --- a/spine-ts/README.md +++ b/spine-ts/README.md @@ -36,9 +36,8 @@ All `*.js` files are self-contained and include both the core and respective bac If you write your app with TypeScript, additionally copy the corresponding `build/spine-*.d.ts` file to your project. -## Example -To run the examples, spawn a light-weight web server in the root of spine-ts, then navigate to the respective -`index.html` file. E.g.: +## Examples +To run the examples, the image, atlas, and JSON files must be served by a webserver, they can't be loaded from your local disk. Spawn a light-weight web server in the root of spine-ts, then navigate to the `index.html` file for the example you want to view. E.g.: ``` cd spine-ts @@ -47,6 +46,20 @@ python -m SimpleHTTPServer Then open `http://localhost:8000/webgl/example`, `http://localhost:8000/canvas/example`, `https://localhost:8000/threejs/example` or `http://localhost:8000/widget/example` in your browser. +## WebGL Demos +The spine-ts WebGL demos load their image, atlas, and JSON files from our webserver and so can be run directly, without needing a webserver. View the demos [all on one page](http://esotericsoftware.com/spine-demos/) or use the [standalone demos]() which are easy for you to explore and edit. The standalone demos can also be viewed here: + +- [Spine vs sprite sheets](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/spritesheets.html) +- [Image changes](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/imagechanges.html) +- [Transitions](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/transitions.html) +- [Meshes](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/meshes.html) +- [Skins](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/skins.html) +- [Hoverboard](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/hoverboard.html) +- [Transform constraints](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/transforms.html) +- [Tank](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/tank.html) +- [Vine](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/vine.html) +- [Stretchyman](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/stretchyman.html) + ## Development Setup The spine-ts runtime and the various backends are implemented in TypeScript for greater maintainability and better tooling support. To setup a development environment, follow these steps. diff --git a/spine-ts/webgl/demos/framebyframe.html b/spine-ts/webgl/demos/framebyframe.html deleted file mode 100644 index 10ff67bdc..000000000 --- a/spine-ts/webgl/demos/framebyframe.html +++ /dev/null @@ -1,23 +0,0 @@ - -Frame-by-frame - Spine Demo - - - - - - - -
-
-
-
- -
- - - - - \ No newline at end of file diff --git a/spine-ts/webgl/demos/ikconstraint.html b/spine-ts/webgl/demos/hoverboard.html similarity index 56% rename from spine-ts/webgl/demos/ikconstraint.html rename to spine-ts/webgl/demos/hoverboard.html index b48a2bc9a..9534e2a72 100644 --- a/spine-ts/webgl/demos/ikconstraint.html +++ b/spine-ts/webgl/demos/hoverboard.html @@ -4,16 +4,16 @@ - +
-
- Display Bones +
+ Display Bones
diff --git a/spine-ts/webgl/demos/ikconstraint.js b/spine-ts/webgl/demos/hoverboard.js similarity index 96% rename from spine-ts/webgl/demos/ikconstraint.js rename to spine-ts/webgl/demos/hoverboard.js index 1f7e04d4f..25bb6ec64 100644 --- a/spine-ts/webgl/demos/ikconstraint.js +++ b/spine-ts/webgl/demos/hoverboard.js @@ -1,4 +1,4 @@ -var ikConstraintDemo = function(loadingComplete, bgColor) { +var hoverboardDemo = function(loadingComplete, bgColor) { var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); @@ -13,12 +13,12 @@ var ikConstraintDemo = function(loadingComplete, bgColor) { var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var isPlaying = true; - var DEMO_NAME = "IkConstraintDemo"; + var DEMO_NAME = "HoverboardDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("ikdemo-canvas"); + canvas = document.getElementById("hoverboard-canvas"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); @@ -71,7 +71,7 @@ var ikConstraintDemo = function(loadingComplete, bgColor) { } function setupUI() { - var checkbox = $("#ikdemo-drawbones"); + var checkbox = $("#hoverboard-drawbones"); renderer.skeletonDebugRenderer.drawRegionAttachments = false; renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawBones = false; diff --git a/spine-ts/webgl/demos/imagechanges.html b/spine-ts/webgl/demos/imagechanges.html new file mode 100644 index 000000000..43a2ae6f9 --- /dev/null +++ b/spine-ts/webgl/demos/imagechanges.html @@ -0,0 +1,23 @@ + +Frame-by-frame - Spine Demo + + + + + + + +
+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/spine-ts/webgl/demos/framebyframe.js b/spine-ts/webgl/demos/imagechanges.js similarity index 94% rename from spine-ts/webgl/demos/framebyframe.js rename to spine-ts/webgl/demos/imagechanges.js index c0230a0f2..c2d2ae5f3 100644 --- a/spine-ts/webgl/demos/framebyframe.js +++ b/spine-ts/webgl/demos/imagechanges.js @@ -1,4 +1,4 @@ -var frameByFrameDemo = function(loadingComplete, bgColor) { +var imageChangesDemo = function(loadingComplete, bgColor) { var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1); var canvas, gl, renderer, input, assetManager; @@ -8,12 +8,12 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { var activeSkeleton = "Alien"; var playButton, timeLine, isPlaying = true; - var DEMO_NAME = "FrameByFrameDemo"; + var DEMO_NAME = "ImageChangesDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("framebyframedemo-canvas"); + 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 }); @@ -43,7 +43,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { } function setupUI() { - playButton = $("#framebyframedemo-playbutton"); + playButton = $("#imagechanges-playbutton"); var playButtonUpdate = function () { isPlaying = !isPlaying; if (isPlaying) { @@ -57,7 +57,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { playButton.click(playButtonUpdate); playButton.addClass("pause"); - timeLine = $("#framebyframedemo-timeline").data("slider"); + timeLine = $("#imagechanges-timeline").data("slider"); timeLine.changed = function (percent) { if (isPlaying) playButton.click(); if (!isPlaying) { @@ -71,7 +71,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { } }; - var list = $("#framebyframedemo-active-skeleton"); + var list = $("#imagechanges-skeleton"); for (var skeletonName in skeletons) { var option = $(""); option.attr("value", skeletonName).text(skeletonName); @@ -79,7 +79,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) { list.append(option); } list.change(function() { - activeSkeleton = $("#framebyframedemo-active-skeleton option:selected").text(); + activeSkeleton = $("#imagechanges-skeleton option:selected").text(); var active = skeletons[activeSkeleton]; var animationDuration = active.state.getCurrent(0).animation.duration; timeLine.set(active.playTime / animationDuration); diff --git a/spine-ts/webgl/demos/meshes.html b/spine-ts/webgl/demos/meshes.html index 30ef4f49f..a87f42de4 100644 --- a/spine-ts/webgl/demos/meshes.html +++ b/spine-ts/webgl/demos/meshes.html @@ -8,12 +8,12 @@
-
-
-
-
- Draw bones
- Draw triangles
+
+
+
+
+ Draw bones
+ Draw triangles
- - - - - -
-
-
-
- Display bones & path -
- - - - - \ No newline at end of file diff --git a/spine-ts/webgl/demos/skins.html b/spine-ts/webgl/demos/skins.html index a059c6108..f1e3241cd 100644 --- a/spine-ts/webgl/demos/skins.html +++ b/spine-ts/webgl/demos/skins.html @@ -8,11 +8,11 @@
-
-
- -
- Randomize skin +
+
+ +
+ Randomize skin
- - - - - -
-
- -
-Time multiplier -
-
- - - - - \ No newline at end of file diff --git a/spine-ts/webgl/demos/spritesheets.html b/spine-ts/webgl/demos/spritesheets.html new file mode 100644 index 000000000..1f92933eb --- /dev/null +++ b/spine-ts/webgl/demos/spritesheets.html @@ -0,0 +1,24 @@ + +Spine vs Sprite Sheets - Spine Demo + + + + + + + +
+
+ +
+Time multiplier +
+
+ + + + + \ No newline at end of file diff --git a/spine-ts/webgl/demos/spritesheet.js b/spine-ts/webgl/demos/spritesheets.js similarity index 78% rename from spine-ts/webgl/demos/spritesheet.js rename to spine-ts/webgl/demos/spritesheets.js index 7ac08e06b..6a1ac9039 100644 --- a/spine-ts/webgl/demos/spritesheet.js +++ b/spine-ts/webgl/demos/spritesheets.js @@ -1,4 +1,4 @@ -var spritesheetDemo = function(loadingComplete, bgColor) { +var spritesheetsDemo = function(loadingComplete, bgColor) { var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8); var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8); @@ -11,12 +11,12 @@ var spritesheetDemo = function(loadingComplete, bgColor) { var timeKeeper, loadingScreen, input; var playTime = 0, framePlaytime = 0, clickAnim = 0; - var DEMO_NAME = "SpritesheetDemo"; + var DEMO_NAME = "SpritesheetsDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("spritesheetdemo-canvas"); + canvas = document.getElementById("spritesheets-canvas"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); @@ -52,6 +52,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) { offset = new spine.Vector2(); bounds = new spine.Vector2(); skeleton.getBounds(offset, bounds); + skeleton.x -= 60; skeletonSeq = new spine.Skeleton(skeletonData); walkAnim = skeletonSeq.data.findAnimation("walk"); @@ -64,8 +65,8 @@ var spritesheetDemo = function(loadingComplete, bgColor) { setupUI(); setupInput(); - $("#spritesheetdemo-overlay").removeClass("overlay-hide"); - $("#spritesheetdemo-overlay").addClass("overlay"); + $("#spritesheets-overlay").removeClass("overlay-hide"); + $("#spritesheets-overlay").addClass("overlay"); loadingComplete(canvas, render); } else { loadingScreen.draw(); @@ -73,34 +74,36 @@ var spritesheetDemo = function(loadingComplete, bgColor) { } } - function setupUI() { - timeSlider = $("#spritesheetdemo-timeslider").data("slider"); + function setupUI () { + timeSlider = $("#spritesheets-timeslider").data("slider"); timeSlider.set(0.5); - timeSliderLabel = $("#spritesheetdemo-timeslider-label")[0]; + timeSliderLabel = $("#spritesheets-timeslider-label")[0]; } - function setupInput() { + function setupInput () { input.addListener({ down: function(x, y) { - animationState.setAnimation(0, (clickAnim++ % 2 == 0) ? "roar" : "jump", false); - animationState.addAnimation(0, "walk", true, 0); + setAnimation((clickAnim++ % 2 == 0) ? "roar" : "jump"); }, up: function(x, y) { }, moved: function(x, y) { }, dragged: function(x, y) { } }); - $("#spritesheetdemo-roar").click(function () { - animationState.setAnimation(0, "roar", false); - animationState.addAnimation(0, "walk", true, 0); + $("#spritesheets-roar").click(function () { + setAnimation("roar"); }); - $("#spritesheetdemo-jump").click(function () { - animationState.setAnimation(0, "jump", false); - animationState.addAnimation(0, "walk", true, 0); + $("#spritesheets-jump").click(function () { + setAnimation("jump"); }); } + + function setAnimation (name) { + animationState.setAnimation(0, name, false); + animationState.addAnimation(0, "walk", true, 0); + } function resize () { - renderer.camera.position.x = offset.x + viewportWidth / 2 + 100; + renderer.camera.position.x = offset.x + viewportWidth / 2 - 25; renderer.camera.position.y = offset.y + viewportHeight / 2 - 160; renderer.camera.viewportWidth = viewportWidth * 1.2; renderer.camera.viewportHeight = viewportHeight * 1.2; @@ -119,16 +122,12 @@ var spritesheetDemo = function(loadingComplete, bgColor) { var newValue = Math.round(timeSlider.get() * 100) + "%"; if (oldValue !== newValue) timeSliderLabel.textContent = newValue; } - + var animationDuration = animationState.getCurrent(0).animation.duration; playTime += delta; while (playTime >= animationDuration) { playTime -= animationDuration; - } - - animationState.update(delta); - animationState.apply(skeleton); - skeleton.updateWorldTransform(); + } walkLastTimePrecise += delta; while (walkLastTimePrecise - walkLastTime > 1 / FPS) { @@ -138,15 +137,22 @@ var spritesheetDemo = function(loadingComplete, bgColor) { } skeletonSeq.updateWorldTransform(); - + animationState.update(delta); + var current = animationState.getCurrent(0); + if (current.animation.name == "walk") current.time = walkLastTimePrecise; + animationState.apply(skeleton); + skeleton.updateWorldTransform(); + gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clear(gl.COLOR_BUFFER_BIT); - renderer.begin(); - var frame = frames[currFrame]; + renderer.begin(); + var frame = frames[currFrame]; renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeletonSeq, true); - renderer.end(); + renderer.end(); + + console.log(Math.round(animationState.getCurrent(0).time*10)/10 + " " + Math.round(walkLastTime*10)/10) } init(); diff --git a/spine-ts/webgl/demos/stretchy.html b/spine-ts/webgl/demos/stretchyman.html similarity index 56% rename from spine-ts/webgl/demos/stretchy.html rename to spine-ts/webgl/demos/stretchyman.html index a7f714564..a01599cbc 100644 --- a/spine-ts/webgl/demos/stretchy.html +++ b/spine-ts/webgl/demos/stretchyman.html @@ -4,16 +4,16 @@ - +
-
- Display bones +
+ Display bones
diff --git a/spine-ts/webgl/demos/stretchy.js b/spine-ts/webgl/demos/stretchyman.js similarity index 97% rename from spine-ts/webgl/demos/stretchy.js rename to spine-ts/webgl/demos/stretchyman.js index 087011b0e..ace9b61fa 100644 --- a/spine-ts/webgl/demos/stretchy.js +++ b/spine-ts/webgl/demos/stretchyman.js @@ -1,4 +1,4 @@ -var stretchyDemo = function(loadingComplete, bgColor) { +var stretchymanDemo = function(loadingComplete, bgColor) { var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); @@ -21,12 +21,12 @@ var stretchyDemo = function(loadingComplete, bgColor) { var kneePos = new spine.Vector2(); var playButton, timeLine, spacing, isPlaying = true, playTime = 0; - var DEMO_NAME = "StretchyDemo"; + var DEMO_NAME = "StretchymanDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("stretchydemo-canvas"); + 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 }); @@ -79,7 +79,7 @@ var stretchyDemo = function(loadingComplete, bgColor) { } function setupUI() { - var checkbox = $("#stretchydemo-drawbones"); + var checkbox = $("#stretchyman-drawbones"); renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawBones = false; checkbox.change(function() { diff --git a/spine-ts/webgl/demos/tank.html b/spine-ts/webgl/demos/tank.html index 315534ea4..6b7ba9453 100644 --- a/spine-ts/webgl/demos/tank.html +++ b/spine-ts/webgl/demos/tank.html @@ -8,10 +8,10 @@
-
-
-
- Display bones +
+
+
+ Display bones
- +
-
+
Rotation offset -

+

Translation mix -
+
diff --git a/spine-ts/webgl/demos/transformconstraint.js b/spine-ts/webgl/demos/transforms.js similarity index 91% rename from spine-ts/webgl/demos/transformconstraint.js rename to spine-ts/webgl/demos/transforms.js index d653663c7..bd7f20b38 100644 --- a/spine-ts/webgl/demos/transformconstraint.js +++ b/spine-ts/webgl/demos/transforms.js @@ -1,4 +1,4 @@ -var transformConstraintDemo = function(loadingComplete, bgColor) { +var transformsDemo = function(loadingComplete, bgColor) { var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); @@ -15,12 +15,12 @@ var transformConstraintDemo = function(loadingComplete, bgColor) { var lastRotation = 0; var mix, lastOffset = 0, lastMix = 0.5; - var DEMO_NAME = "TransformConstraintDemo"; + var DEMO_NAME = "TransformsDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("transformdemo-canvas"); + 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 }); @@ -45,7 +45,7 @@ var transformConstraintDemo = function(loadingComplete, bgColor) { }); var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas); var skeletonJson = new spine.SkeletonJson(atlasLoader); - var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transformConstraint); + var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms); skeleton = new spine.Skeleton(skeletonData); skeleton.setToSetupPose(); skeleton.updateWorldTransform(); @@ -75,27 +75,27 @@ var transformConstraintDemo = function(loadingComplete, bgColor) { } function setupUI() { - var rotationOffset = $("#transformdemo-rotationoffset").data("slider"); + var rotationOffset = $("#transforms-rotationoffset").data("slider"); rotationOffset.changed = function (percent) { var val = percent * 360 - 180; var delta = val - lastOffset; lastOffset = val; skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta; skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta; - $("#transformdemo-rotationoffset-label").text(Math.round(val) + "°"); + $("#transforms-rotationoffset-label").text(Math.round(val) + "°"); }; - $("#transformdemo-rotationoffset-label").text("0°"); + $("#transforms-rotationoffset-label").text("0°"); - var translationMix = $("#transformdemo-translationmix").data("slider"); + var translationMix = $("#transforms-translationmix").data("slider"); translationMix.set(0.5); translationMix.changed = function (percent) { var val = percent; var delta = val - lastMix; lastMix = val; skeleton.findTransformConstraint("wheel1").translateMix += delta; - $("#transformdemo-translationmix-label").text(Math.round(val * 100) + "%"); + $("#transforms-translationmix-label").text(Math.round(val * 100) + "%"); }; - $("#transformdemo-translationmix-label").text("50%"); + $("#transforms-translationmix-label").text("50%"); } function setupInput() { diff --git a/spine-ts/webgl/demos/transitions.html b/spine-ts/webgl/demos/transitions.html index 498883d5b..ed7a58bc8 100644 --- a/spine-ts/webgl/demos/transitions.html +++ b/spine-ts/webgl/demos/transitions.html @@ -8,9 +8,9 @@
-
+
Time multiplier -
+
+ + + + + +
+
+
+
+ Display bones & path +
+ + + + + \ No newline at end of file diff --git a/spine-ts/webgl/demos/pathconstraint.js b/spine-ts/webgl/demos/vine.js similarity index 95% rename from spine-ts/webgl/demos/pathconstraint.js rename to spine-ts/webgl/demos/vine.js index 12af8f063..6507cde37 100644 --- a/spine-ts/webgl/demos/pathconstraint.js +++ b/spine-ts/webgl/demos/vine.js @@ -1,4 +1,4 @@ -var pathConstraintDemo = function(loadingComplete, bgColor) { +var vineDemo = function(loadingComplete, bgColor) { var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); @@ -13,12 +13,12 @@ var pathConstraintDemo = function(loadingComplete, bgColor) { var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(); var playButton, timeLine, isPlaying = true, playTime = 0; - var DEMO_NAME = "PathConstraintDemo"; + var DEMO_NAME = "VineDemo"; if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); function init () { - canvas = document.getElementById("pathconstraintdemo-canvas"); + 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 }); @@ -72,7 +72,7 @@ var pathConstraintDemo = function(loadingComplete, bgColor) { } function setupUI() { - playButton = $("#pathconstraintdemo-playbutton"); + playButton = $("#vine-playbutton"); var playButtonUpdate = function () { isPlaying = !isPlaying; if (isPlaying) { @@ -86,7 +86,7 @@ var pathConstraintDemo = function(loadingComplete, bgColor) { playButton.click(playButtonUpdate); playButton.addClass("pause"); - timeLine = $("#pathconstraintdemo-timeline").data("slider"); + timeLine = $("#vine-timeline").data("slider"); timeLine.changed = function (percent) { if (isPlaying) playButton.click(); if (!isPlaying) { @@ -101,7 +101,7 @@ var pathConstraintDemo = function(loadingComplete, bgColor) { renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawBones = false; - var checkbox = $("#pathconstraintdemo-drawbones"); + var checkbox = $("#vine-drawbones"); checkbox.change(function() { renderer.skeletonDebugRenderer.drawPaths = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked; From 1dd775f5d68caa967f8ff9329e84de052d7fa439 Mon Sep 17 00:00:00 2001 From: NathanSweet Date: Tue, 6 Sep 2016 21:13:09 +0200 Subject: [PATCH 04/14] Changed default colors. --- spine-ts/webgl/demos/hoverboard.js | 2 +- spine-ts/webgl/demos/imagechanges.js | 2 +- spine-ts/webgl/demos/meshes.js | 2 +- spine-ts/webgl/demos/skins.js | 4 ++-- spine-ts/webgl/demos/spritesheets.js | 4 +--- spine-ts/webgl/demos/stretchyman.js | 2 +- spine-ts/webgl/demos/tank.js | 2 +- spine-ts/webgl/demos/transforms.js | 2 +- spine-ts/webgl/demos/transitions.js | 2 +- spine-ts/webgl/demos/vine.js | 2 +- 10 files changed, 11 insertions(+), 13 deletions(-) diff --git a/spine-ts/webgl/demos/hoverboard.js b/spine-ts/webgl/demos/hoverboard.js index 25bb6ec64..6e71e7ad4 100644 --- a/spine-ts/webgl/demos/hoverboard.js +++ b/spine-ts/webgl/demos/hoverboard.js @@ -15,7 +15,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) { var DEMO_NAME = "HoverboardDemo"; - if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); + if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); function init () { canvas = document.getElementById("hoverboard-canvas"); diff --git a/spine-ts/webgl/demos/imagechanges.js b/spine-ts/webgl/demos/imagechanges.js index c2d2ae5f3..54b270d13 100644 --- a/spine-ts/webgl/demos/imagechanges.js +++ b/spine-ts/webgl/demos/imagechanges.js @@ -10,7 +10,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) { var DEMO_NAME = "ImageChangesDemo"; - if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); + if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); function init () { canvas = document.getElementById("imagechanges-canvas"); diff --git a/spine-ts/webgl/demos/meshes.js b/spine-ts/webgl/demos/meshes.js index 858502b3b..f6897a7b8 100644 --- a/spine-ts/webgl/demos/meshes.js +++ b/spine-ts/webgl/demos/meshes.js @@ -8,7 +8,7 @@ var meshesDemo = function(loadingComplete, bgColor) { var DEMO_NAME = "MeshesDemo"; - if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); + if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); function init () { canvas = document.getElementById("meshes-canvas"); diff --git a/spine-ts/webgl/demos/skins.js b/spine-ts/webgl/demos/skins.js index 026290dab..ca26bf425 100644 --- a/spine-ts/webgl/demos/skins.js +++ b/spine-ts/webgl/demos/skins.js @@ -7,7 +7,7 @@ var skinsDemo = function(loadingComplete, bgColor) { var DEMO_NAME = "SkinsDemo"; - if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); + if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); function init () { canvas = document.getElementById("skins-canvas"); @@ -197,7 +197,7 @@ var skinsDemo = function(loadingComplete, bgColor) { } } - renderer.camera.position.x = offset.x + bounds.x * 1.5 - 150; + renderer.camera.position.x = offset.x + bounds.x * 1.5 - 125; renderer.camera.position.y = offset.y + bounds.y / 2; renderer.camera.viewportWidth = bounds.x * 3; renderer.camera.viewportHeight = bounds.y * 1.2; diff --git a/spine-ts/webgl/demos/spritesheets.js b/spine-ts/webgl/demos/spritesheets.js index 6a1ac9039..0d74382db 100644 --- a/spine-ts/webgl/demos/spritesheets.js +++ b/spine-ts/webgl/demos/spritesheets.js @@ -13,7 +13,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) { var DEMO_NAME = "SpritesheetsDemo"; - if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); + if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); function init () { canvas = document.getElementById("spritesheets-canvas"); @@ -151,8 +151,6 @@ var spritesheetsDemo = function(loadingComplete, bgColor) { renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeletonSeq, true); renderer.end(); - - console.log(Math.round(animationState.getCurrent(0).time*10)/10 + " " + Math.round(walkLastTime*10)/10) } init(); diff --git a/spine-ts/webgl/demos/stretchyman.js b/spine-ts/webgl/demos/stretchyman.js index ace9b61fa..0a03dae6d 100644 --- a/spine-ts/webgl/demos/stretchyman.js +++ b/spine-ts/webgl/demos/stretchyman.js @@ -23,7 +23,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) { var DEMO_NAME = "StretchymanDemo"; - if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); + if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); function init () { canvas = document.getElementById("stretchyman-canvas"); diff --git a/spine-ts/webgl/demos/tank.js b/spine-ts/webgl/demos/tank.js index 8b3a4158e..932337fd7 100644 --- a/spine-ts/webgl/demos/tank.js +++ b/spine-ts/webgl/demos/tank.js @@ -6,7 +6,7 @@ var tankDemo = function(loadingComplete, bgColor) { var DEMO_NAME = "TankDemo"; - if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); + if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); function init () { canvas = document.getElementById("tank-canvas"); diff --git a/spine-ts/webgl/demos/transforms.js b/spine-ts/webgl/demos/transforms.js index bd7f20b38..c1c90edb6 100644 --- a/spine-ts/webgl/demos/transforms.js +++ b/spine-ts/webgl/demos/transforms.js @@ -17,7 +17,7 @@ var transformsDemo = function(loadingComplete, bgColor) { var DEMO_NAME = "TransformsDemo"; - if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); + if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); function init () { canvas = document.getElementById("transforms-canvas"); diff --git a/spine-ts/webgl/demos/transitions.js b/spine-ts/webgl/demos/transitions.js index 1acd403f2..3a426220a 100644 --- a/spine-ts/webgl/demos/transitions.js +++ b/spine-ts/webgl/demos/transitions.js @@ -9,7 +9,7 @@ var transitionsDemo = function(loadingComplete, bgColor) { var DEMO_NAME = "TransitionsDemo"; - if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); + if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); function init () { timeSlider = $("#transitions-timeslider").data("slider"); diff --git a/spine-ts/webgl/demos/vine.js b/spine-ts/webgl/demos/vine.js index 6507cde37..d0d18c628 100644 --- a/spine-ts/webgl/demos/vine.js +++ b/spine-ts/webgl/demos/vine.js @@ -15,7 +15,7 @@ var vineDemo = function(loadingComplete, bgColor) { var DEMO_NAME = "VineDemo"; - if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); + if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); function init () { canvas = document.getElementById("vine-canvas"); From 1806ec6c7241a9aad5616d7897a3989396df318b Mon Sep 17 00:00:00 2001 From: NathanSweet Date: Wed, 7 Sep 2016 10:38:39 +0200 Subject: [PATCH 05/14] [ts] Stretchyman demo upgrade. --- spine-ts/webgl/demos/stretchyman.js | 51 ++++++++++++++++------------- 1 file changed, 28 insertions(+), 23 deletions(-) diff --git a/spine-ts/webgl/demos/stretchyman.js b/spine-ts/webgl/demos/stretchyman.js index 0a03dae6d..3a84ce24f 100644 --- a/spine-ts/webgl/demos/stretchyman.js +++ b/spine-ts/webgl/demos/stretchyman.js @@ -105,18 +105,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) { dragged: function(x, y) { if (target != null) { renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); - var yOnly = target.data.name === "head controller" || target.data.name === "hip controller"; - if (target.parent !== null) { + if (target.parent !== null) target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y)); - if (!yOnly) target.x = temp2.x; - target.y = temp2.y; - } else { - if (!yOnly) target.x = coords.x - skeleton.x; - target.y = coords.y - skeleton.y; - } - - if (target.data.name === "hip controller") { - var head = skeleton.findBone("head controller"); + else + temp2.set(coords.x - skeleton.x, coords.y - skeleton.y); + target.x = temp2.x; + target.y = temp2.y; + if (target.data.name === "head controller") { + var hipControl = skeleton.findBone("hip controller"); + target.x = spine.MathUtils.clamp(target.x, -65, 65); + target.y = Math.max(260, target.y); } } }, @@ -134,22 +132,24 @@ var stretchymanDemo = function(loadingComplete, bgColor) { }); } - function center(middleBone, hipBone, footBone) { + function center (middleBone, hipBone, footBone, amount, dir) { temp.set(footBone.worldX + skeleton.x, footBone.worldY + skeleton.y, 0) .sub(temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0)); + var dist = Math.sqrt(temp.x * temp.x + temp.y * temp.y); temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0); temp.scale(0.5).add(temp3); middleBone.parent.worldToLocal(kneePos.set(temp.x, temp.y)); middleBone.x = kneePos.x; - middleBone.y = kneePos.y; + middleBone.y = kneePos.y; + middleBone.children[0].y = (22 + Math.max(0, amount - dist * 0.3)) * dir; } - var rotate = function(handBone, elbowBone) { - // can do all this in world space cause handBone is essentially in world space - var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.webgl.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize(); - var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180; + function rotate (handBone, elbowBone) { + // can do all this in world space cause handBone is essentially in world space + var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.webgl.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize(); + var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180; if (v.y < 0) angle = 360 - angle; - handBone.rotation = angle; + handBone.rotation = angle; } function render () { @@ -158,12 +158,17 @@ var stretchymanDemo = function(loadingComplete, bgColor) { state.update(delta); state.apply(skeleton); - center(skeleton.findBone("back leg middle"), skeleton.findBone("back leg 1"), skeleton.findBone("back leg controller")); - center(skeleton.findBone("front leg middle"), skeleton.findBone("front leg 1"), skeleton.findBone("front leg controller")); - center(skeleton.findBone("front arm middle"), skeleton.findBone("front arm 1"), skeleton.findBone("front arm controller")); - center(skeleton.findBone("back arm middle"), skeleton.findBone("back arm 1"), skeleton.findBone("back arm controller")); + center(skeleton.findBone("back leg middle"), skeleton.findBone("back leg 1"), skeleton.findBone("back leg controller"), 65, 1); + center(skeleton.findBone("front leg middle"), skeleton.findBone("front leg 1"), skeleton.findBone("front leg controller"), 65, 1); + center(skeleton.findBone("front arm middle"), skeleton.findBone("front arm 1"), skeleton.findBone("front arm controller"), 90, -1); + center(skeleton.findBone("back arm middle"), skeleton.findBone("back arm 1"), skeleton.findBone("back arm controller"), 90, -1); rotate(skeleton.findBone("front arm controller"), skeleton.findBone("front arm elbow")); - rotate(skeleton.findBone("back arm controller"), skeleton.findBone("back arm elbow")); + rotate(skeleton.findBone("back arm controller"), skeleton.findBone("back arm elbow")); + var headControl = skeleton.findBone("head controller"), hipControl = skeleton.findBone("hip controller") + var head = skeleton.findBone("head"); + 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(); renderer.camera.viewportWidth = bounds.x * 1.2; From aba57b2ad20e2a7927194b374efc0d8540f010e0 Mon Sep 17 00:00:00 2001 From: NathanSweet Date: Wed, 7 Sep 2016 11:07:42 +0200 Subject: [PATCH 06/14] [ts] Added note about CORS. --- spine-ts/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/spine-ts/README.md b/spine-ts/README.md index 198dffbc2..902ac703b 100644 --- a/spine-ts/README.md +++ b/spine-ts/README.md @@ -60,6 +60,8 @@ The spine-ts WebGL demos load their image, atlas, and JSON files from our webser - [Vine](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/vine.html) - [Stretchyman](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/stretchyman.html) +Please note that Chrome and possibly other browsers do not use the original CORS headers when loading cached resources. After the initial page load for a demo, you may need to forcefully refresh (hold `shift` and click refresh) or clear your browser cache. + ## Development Setup The spine-ts runtime and the various backends are implemented in TypeScript for greater maintainability and better tooling support. To setup a development environment, follow these steps. From 1fafe6bd400d40b80d1a35b833035823b8b8875e Mon Sep 17 00:00:00 2001 From: NathanSweet Date: Wed, 7 Sep 2016 22:48:30 +0200 Subject: [PATCH 07/14] [ts] Changed pause/play button. --- spine-ts/webgl/demos/imagechanges.js | 9 +++------ spine-ts/webgl/demos/meshes.js | 9 +++------ spine-ts/webgl/demos/tank.js | 9 +++------ spine-ts/webgl/demos/vine.js | 9 +++------ 4 files changed, 12 insertions(+), 24 deletions(-) diff --git a/spine-ts/webgl/demos/imagechanges.js b/spine-ts/webgl/demos/imagechanges.js index 54b270d13..ad77c37eb 100644 --- a/spine-ts/webgl/demos/imagechanges.js +++ b/spine-ts/webgl/demos/imagechanges.js @@ -46,13 +46,10 @@ var imageChangesDemo = function(loadingComplete, bgColor) { playButton = $("#imagechanges-playbutton"); var playButtonUpdate = function () { isPlaying = !isPlaying; - if (isPlaying) { - playButton.val("Pause"); - playButton.addClass("pause").removeClass("play"); - } else { - playButton.val("Play"); + if (isPlaying) + playButton.addClass("pause").removeClass("play"); + else playButton.addClass("play").removeClass("pause"); - } } playButton.click(playButtonUpdate); playButton.addClass("pause"); diff --git a/spine-ts/webgl/demos/meshes.js b/spine-ts/webgl/demos/meshes.js index f6897a7b8..d7c978555 100644 --- a/spine-ts/webgl/demos/meshes.js +++ b/spine-ts/webgl/demos/meshes.js @@ -46,13 +46,10 @@ var meshesDemo = function(loadingComplete, bgColor) { playButton = $("#meshes-playbutton"); var playButtonUpdate = function () { isPlaying = !isPlaying; - if (isPlaying) { - playButton.val("Pause"); - playButton.addClass("pause").removeClass("play"); - } else { - playButton.val("Play"); + if (isPlaying) + playButton.addClass("pause").removeClass("play"); + else playButton.addClass("play").removeClass("pause"); - } } playButton.click(playButtonUpdate); playButton.addClass("pause"); diff --git a/spine-ts/webgl/demos/tank.js b/spine-ts/webgl/demos/tank.js index 932337fd7..c856a2aee 100644 --- a/spine-ts/webgl/demos/tank.js +++ b/spine-ts/webgl/demos/tank.js @@ -62,13 +62,10 @@ var tankDemo = function(loadingComplete, bgColor) { playButton = $("#tank-playbutton"); var playButtonUpdate = function () { isPlaying = !isPlaying; - if (isPlaying) { - playButton.val("Pause"); - playButton.addClass("pause").removeClass("play"); - } else { - playButton.val("Play"); + if (isPlaying) + playButton.addClass("pause").removeClass("play"); + else playButton.addClass("play").removeClass("pause"); - } } playButton.click(playButtonUpdate); playButton.addClass("pause"); diff --git a/spine-ts/webgl/demos/vine.js b/spine-ts/webgl/demos/vine.js index d0d18c628..7b9f208dc 100644 --- a/spine-ts/webgl/demos/vine.js +++ b/spine-ts/webgl/demos/vine.js @@ -75,13 +75,10 @@ var vineDemo = function(loadingComplete, bgColor) { playButton = $("#vine-playbutton"); var playButtonUpdate = function () { isPlaying = !isPlaying; - if (isPlaying) { - playButton.val("Pause"); - playButton.addClass("pause").removeClass("play"); - } else { - playButton.val("Play"); + if (isPlaying) + playButton.addClass("pause").removeClass("play"); + else playButton.addClass("play").removeClass("pause"); - } } playButton.click(playButtonUpdate); playButton.addClass("pause"); From fbd8e32c062f98a7f1c9d055463067a0a9503460 Mon Sep 17 00:00:00 2001 From: pharan Date: Thu, 8 Sep 2016 20:43:03 +0800 Subject: [PATCH 08/14] [unity] Fix PMA for SkeletonRenderSeparator. --- .../spine-unity/Mesh Generation/ISubmeshedMeshGenerator.cs | 1 + .../Modules/SkeletonRenderSeparator/SkeletonRenderSeparator.cs | 2 ++ 2 files changed, 3 insertions(+) diff --git a/spine-unity/Assets/spine-unity/Mesh Generation/ISubmeshedMeshGenerator.cs b/spine-unity/Assets/spine-unity/Mesh Generation/ISubmeshedMeshGenerator.cs index 64d13d675..a1fba9084 100644 --- a/spine-unity/Assets/spine-unity/Mesh Generation/ISubmeshedMeshGenerator.cs +++ b/spine-unity/Assets/spine-unity/Mesh Generation/ISubmeshedMeshGenerator.cs @@ -28,6 +28,7 @@ namespace Spine.Unity.MeshGeneration { MeshAndMaterials GenerateMesh (ExposedList instructions, int startSubmesh, int endSubmesh); float ZSpacing { get; set; } + bool PremultiplyVertexColors { get; set; } bool AddNormals { get; set; } bool AddTangents { get; set; } } diff --git a/spine-unity/Assets/spine-unity/Modules/SkeletonRenderSeparator/SkeletonRenderSeparator.cs b/spine-unity/Assets/spine-unity/Modules/SkeletonRenderSeparator/SkeletonRenderSeparator.cs index 5bf76d18d..806dd356f 100644 --- a/spine-unity/Assets/spine-unity/Modules/SkeletonRenderSeparator/SkeletonRenderSeparator.cs +++ b/spine-unity/Assets/spine-unity/Modules/SkeletonRenderSeparator/SkeletonRenderSeparator.cs @@ -137,6 +137,7 @@ namespace Spine.Unity.Modules { var currentRenderer = partsRenderers[rendererIndex]; bool addNormals = skeletonRenderer.calculateNormals; bool addTangents = skeletonRenderer.calculateTangents; + bool pmaVertexColors = skeletonRenderer.pmaVertexColors; for (int si = 0, start = 0; si <= lastSubmeshInstruction; si++) { if (submeshInstructionsItems[si].forceSeparate || si == lastSubmeshInstruction) { @@ -144,6 +145,7 @@ namespace Spine.Unity.Modules { var meshGenerator = currentRenderer.MeshGenerator; meshGenerator.AddNormals = addNormals; meshGenerator.AddTangents = addTangents; + meshGenerator.PremultiplyVertexColors = pmaVertexColors; if (copyPropertyBlock) currentRenderer.SetPropertyBlock(copiedBlock); From ba92b2bb7d07c710a8807725e4cf4a043ded86c6 Mon Sep 17 00:00:00 2001 From: NathanSweet Date: Fri, 9 Sep 2016 11:52:53 +0200 Subject: [PATCH 09/14] [ts] Fixed moving root bone in IK example. --- spine-ts/webgl/demos/hoverboard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spine-ts/webgl/demos/hoverboard.js b/spine-ts/webgl/demos/hoverboard.js index 6e71e7ad4..ed7c8ade2 100644 --- a/spine-ts/webgl/demos/hoverboard.js +++ b/spine-ts/webgl/demos/hoverboard.js @@ -9,7 +9,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) { var timeKeeper, loadingScreen; var target = null; var hoverTargets = []; - var controlBones = ["hoverboard controller", "hip", "board target"]; + var controlBones = ["hoverboard controller", "hip controller", "board target"]; var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var isPlaying = true; From e3cdea94a092f6ca77f36ed94832a26da5c8d6a7 Mon Sep 17 00:00:00 2001 From: badlogic Date: Sun, 11 Sep 2016 13:12:26 +0200 Subject: [PATCH 10/14] [c] Closes #696, leak in spine-c binary loader --- spine-c/src/spine/SkeletonBinary.c | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/spine-c/src/spine/SkeletonBinary.c b/spine-c/src/spine/SkeletonBinary.c index 5a0485ac0..06eb15fa6 100644 --- a/spine-c/src/spine/SkeletonBinary.c +++ b/spine-c/src/spine/SkeletonBinary.c @@ -656,7 +656,11 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput int i; spAttachmentType type; const char* name = readString(input); - if (!name) MALLOC_STR(name, attachmentName); + int freeName = name != 0; + if (!name) { + freeName = 0; + MALLOC_STR(name, attachmentName); + } type = (spAttachmentType)readByte(input); @@ -680,6 +684,7 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput readColor(input, ®ion->r, ®ion->g, ®ion->b, ®ion->a); spRegionAttachment_updateOffset(region); spAttachmentLoader_configureAttachment(self->attachmentLoader, attachment); + if (freeName) FREE(name); return attachment; } case SP_ATTACHMENT_BOUNDING_BOX: { @@ -689,6 +694,7 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput _readVertices(self, input, SUB_CAST(spVertexAttachment, attachment), vertexCount); if (nonessential) readInt(input); /* Skip color. */ spAttachmentLoader_configureAttachment(self->attachmentLoader, attachment); + if (freeName) FREE(name); return attachment; } case SP_ATTACHMENT_MESH: { @@ -717,6 +723,7 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput mesh->height = 0; } spAttachmentLoader_configureAttachment(self->attachmentLoader, attachment); + if (freeName) FREE(name); return attachment; } case SP_ATTACHMENT_LINKED_MESH: { @@ -738,6 +745,7 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput mesh->height = readFloat(input) * self->scale; } _spSkeletonBinary_addLinkedMesh(self, mesh, skinName, slotIndex, parent); + if (freeName) FREE(name); return attachment; } case SP_ATTACHMENT_PATH: { @@ -755,10 +763,12 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput path->lengths[i] = readFloat(input) * self->scale; } if (nonessential) readInt(input); /* Skip color. */ + if (freeName) FREE(name); return attachment; } } + if (freeName) FREE(name); return 0; } From 48c5b06676c10454e52eed53dbfff7d2d6a3ee5f Mon Sep 17 00:00:00 2001 From: badlogic Date: Sun, 11 Sep 2016 13:26:51 +0200 Subject: [PATCH 11/14] [cocos2dx] Closes #611, cocos2d-x v3 auto-batcher does it's work, makes SkeletonBatch a lot simpler --- .../example/Classes/BatchingExample.cpp | 4 - spine-cocos2dx/src/spine/SkeletonBatch.cpp | 170 ++++++++---------- spine-cocos2dx/src/spine/SkeletonBatch.h | 75 ++++---- 3 files changed, 103 insertions(+), 146 deletions(-) diff --git a/spine-cocos2dx/example/Classes/BatchingExample.cpp b/spine-cocos2dx/example/Classes/BatchingExample.cpp index fe919fa25..0577fd077 100644 --- a/spine-cocos2dx/example/Classes/BatchingExample.cpp +++ b/spine-cocos2dx/example/Classes/BatchingExample.cpp @@ -44,10 +44,6 @@ Scene* BatchingExample::scene () { bool BatchingExample::init () { if (!LayerColor::initWithColor(Color4B(128, 128, 128, 255))) return false; - // To avoid the SkeletonBatch buffer from being resized, set this to the number of vertices ever rendered in one frame. - // BatchingExample needs ~3200, but let's set it low to test the buffer resizing. - SkeletonBatch::setBufferSize(512); - // Load the texture atlas. _atlas = spAtlas_createFromFile("spineboy.atlas", 0); CCASSERT(_atlas, "Error reading atlas file."); diff --git a/spine-cocos2dx/src/spine/SkeletonBatch.cpp b/spine-cocos2dx/src/spine/SkeletonBatch.cpp index 1237f0d74..19ea80171 100644 --- a/spine-cocos2dx/src/spine/SkeletonBatch.cpp +++ b/spine-cocos2dx/src/spine/SkeletonBatch.cpp @@ -1,10 +1,10 @@ /****************************************************************************** * Spine Runtimes Software License * Version 2.3 - * + * * Copyright (c) 2013-2015, Esoteric Software * All rights reserved. - * + * * You are granted a perpetual, non-exclusive, non-sublicensable and * non-transferable license to use, install, execute and perform the Spine * Runtimes Software (the "Software") and derivative works solely for personal @@ -16,7 +16,7 @@ * 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 @@ -38,102 +38,72 @@ USING_NS_CC; using std::max; namespace spine { - -static SkeletonBatch* instance = nullptr; - -void SkeletonBatch::setBufferSize (int vertexCount) { - if (instance) delete instance; - instance = new SkeletonBatch(vertexCount); -} - -SkeletonBatch* SkeletonBatch::getInstance () { - if (!instance) instance = new SkeletonBatch(8192); - return instance; -} -void SkeletonBatch::destroyInstance () { - if (instance) { - delete instance; - instance = nullptr; + static SkeletonBatch* instance = nullptr; + + SkeletonBatch* SkeletonBatch::getInstance () { + if (!instance) instance = new SkeletonBatch(); + return instance; } -} - -SkeletonBatch::SkeletonBatch (int capacity) : - _capacity(capacity), _position(0) -{ - _buffer = new V3F_C4B_T2F[capacity]; - _firstCommand = new Command(); - _command = _firstCommand; - - Director::getInstance()->getEventDispatcher()->addCustomEventListener(EVENT_AFTER_DRAW_RESET_POSITION, [this](EventCustom* eventCustom){ - this->update(0); - });; -} - -SkeletonBatch::~SkeletonBatch () { - Director::getInstance()->getEventDispatcher()->removeCustomEventListeners(EVENT_AFTER_DRAW_RESET_POSITION); - - Command* command = _firstCommand; - while (command) { - Command* next = command->next; - delete command; - command = next; - } - - delete [] _buffer; -} - -void SkeletonBatch::update (float delta) { - _position = 0; - _command = _firstCommand; -} - -void SkeletonBatch::addCommand (cocos2d::Renderer* renderer, float globalZOrder, GLuint textureID, GLProgramState* glProgramState, - BlendFunc blendFunc, const TrianglesCommand::Triangles& triangles, const Mat4& transform, uint32_t transformFlags -) { - if (_position + triangles.vertCount > _capacity) { - int newCapacity = max(_capacity + _capacity / 2, _position + triangles.vertCount); - V3F_C4B_T2F* newBuffer = new V3F_C4B_T2F[newCapacity]; - memcpy(newBuffer, _buffer, _position); - - int newPosition = 0; - Command* command = _firstCommand; - while (newPosition < _position) { - command->triangles->verts = newBuffer + newPosition; - newPosition += command->triangles->vertCount; - command = command->next; - } - - delete [] _buffer; - _buffer = newBuffer; - _capacity = newCapacity; - } - - memcpy(_buffer + _position, triangles.verts, sizeof(V3F_C4B_T2F) * triangles.vertCount); - _command->triangles->verts = _buffer + _position; - _position += triangles.vertCount; - - _command->triangles->vertCount = triangles.vertCount; - _command->triangles->indexCount = triangles.indexCount; - _command->triangles->indices = triangles.indices; - - _command->trianglesCommand->init(globalZOrder, textureID, glProgramState, blendFunc, *_command->triangles, transform, transformFlags); - renderer->addCommand(_command->trianglesCommand); - - if (!_command->next) _command->next = new Command(); - _command = _command->next; -} - -SkeletonBatch::Command::Command () : - next(nullptr) -{ - trianglesCommand = new TrianglesCommand(); - triangles = new TrianglesCommand::Triangles(); -} - -SkeletonBatch::Command::~Command () { - delete triangles; - delete trianglesCommand; -} - -} + + void SkeletonBatch::destroyInstance () { + if (instance) { + delete instance; + instance = nullptr; + } + } + + SkeletonBatch::SkeletonBatch () + { + _firstCommand = new Command(); + _command = _firstCommand; + + Director::getInstance()->getEventDispatcher()->addCustomEventListener(EVENT_AFTER_DRAW_RESET_POSITION, [this](EventCustom* eventCustom){ + this->update(0); + });; + } + + SkeletonBatch::~SkeletonBatch () { + Director::getInstance()->getEventDispatcher()->removeCustomEventListeners(EVENT_AFTER_DRAW_RESET_POSITION); + + Command* command = _firstCommand; + while (command) { + Command* next = command->next; + delete command; + command = next; + } + } + + void SkeletonBatch::update (float delta) { + _command = _firstCommand; + } + + void SkeletonBatch::addCommand (cocos2d::Renderer* renderer, float globalZOrder, GLuint textureID, GLProgramState* glProgramState, + BlendFunc blendFunc, const TrianglesCommand::Triangles& triangles, const Mat4& transform, uint32_t transformFlags + ) { + _command->triangles->verts = triangles.verts; + + _command->triangles->vertCount = triangles.vertCount; + _command->triangles->indexCount = triangles.indexCount; + _command->triangles->indices = triangles.indices; + + _command->trianglesCommand->init(globalZOrder, textureID, glProgramState, blendFunc, *_command->triangles, transform); + renderer->addCommand(_command->trianglesCommand); + + if (!_command->next) _command->next = new Command(); + _command = _command->next; + } + + SkeletonBatch::Command::Command () : + next(nullptr) + { + trianglesCommand = new TrianglesCommand(); + triangles = new TrianglesCommand::Triangles(); + } + + SkeletonBatch::Command::~Command () { + delete triangles; + delete trianglesCommand; + } + +} \ No newline at end of file diff --git a/spine-cocos2dx/src/spine/SkeletonBatch.h b/spine-cocos2dx/src/spine/SkeletonBatch.h index 98419bef1..6c2069ce4 100644 --- a/spine-cocos2dx/src/spine/SkeletonBatch.h +++ b/spine-cocos2dx/src/spine/SkeletonBatch.h @@ -1,10 +1,10 @@ /****************************************************************************** * Spine Runtimes Software License * Version 2.3 - * + * * Copyright (c) 2013-2015, Esoteric Software * All rights reserved. - * + * * You are granted a perpetual, non-exclusive, non-sublicensable and * non-transferable license to use, install, execute and perform the Spine * Runtimes Software (the "Software") and derivative works solely for personal @@ -16,7 +16,7 @@ * 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 @@ -36,45 +36,36 @@ #include "cocos2d.h" namespace spine { - -class SkeletonBatch { -public: - /* Sets the max number of vertices that can be drawn in a single frame. The buffer will grow automatically as needed, but - * setting it to the appropriate is more efficient. Best to call before getInstance is called for the first time. Default is - * 8192. */ - static void setBufferSize (int vertexCount); - - static SkeletonBatch* getInstance (); - static void destroyInstance (); - - void update (float delta); - - void addCommand (cocos2d::Renderer* renderer, float globalOrder, GLuint textureID, cocos2d::GLProgramState* glProgramState, - cocos2d::BlendFunc blendType, const cocos2d::TrianglesCommand:: Triangles& triangles, const cocos2d::Mat4& mv, uint32_t flags); - -protected: - SkeletonBatch (int capacity); - virtual ~SkeletonBatch (); - - cocos2d::V3F_C4B_T2F* _buffer; - int _capacity; - int _position; - - class Command { - public: - Command (); - virtual ~Command (); - - cocos2d::TrianglesCommand* trianglesCommand; - cocos2d::TrianglesCommand::Triangles* triangles; - Command* next; - }; - - Command* _firstCommand; - Command* _command; -}; - + class SkeletonBatch { + public: + static SkeletonBatch* getInstance (); + + static void destroyInstance (); + + void update (float delta); + + void addCommand (cocos2d::Renderer* renderer, float globalOrder, GLuint textureID, cocos2d::GLProgramState* glProgramState, + cocos2d::BlendFunc blendType, const cocos2d::TrianglesCommand:: Triangles& triangles, const cocos2d::Mat4& mv, uint32_t flags); + + protected: + SkeletonBatch (); + virtual ~SkeletonBatch (); + + class Command { + public: + Command (); + virtual ~Command (); + + cocos2d::TrianglesCommand* trianglesCommand; + cocos2d::TrianglesCommand::Triangles* triangles; + Command* next; + }; + + Command* _firstCommand; + Command* _command; + }; + } -#endif // SPINE_SKELETONBATCH_H_ +#endif // SPINE_SKELETONBATCH_H_ \ No newline at end of file From c1535080c8e79ec7b1983090bb335da0d08d0ba5 Mon Sep 17 00:00:00 2001 From: John Date: Sun, 11 Sep 2016 22:08:43 +0800 Subject: [PATCH 12/14] [unity] Unity Sprite slices for atlas textures. The new "Apply Regions as Texture Sprite Slices" button adds Sprite slices to all atlas page Textures of an AtlasAsset in Unity Editor. Clicking the button updates existing sprites if it detects name-matches. Adds ones that don't exist. It does not remove non-matches. Sprite slices are not auto-applied on atlas import. Users have to opt-in by clicking the button. This is also to communicate that spine-unity does not currently rely on the Unity sprite system. Unity 5.5 has promising API changes to this end but this cannot be a standard spine-unity feature yet. This replaces the functionality of the old Region Baking as prefabs with mesh assets. Original functionality has been precompiler-defined out. Region baking code will be removed in a future version. --- .../Asset Types/Editor/AtlasAssetInspector.cs | 93 +++++++++++++++++-- 1 file changed, 87 insertions(+), 6 deletions(-) diff --git a/spine-unity/Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs b/spine-unity/Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs index fb5672492..6c831ebd4 100644 --- a/spine-unity/Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs +++ b/spine-unity/Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs @@ -29,6 +29,7 @@ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. *****************************************************************************/ //#define BAKE_ALL_BUTTON +//#define REGION_BAKING_MESH using System; using System.Collections.Generic; @@ -44,8 +45,6 @@ namespace Spine.Unity.Editor { public class AtlasAssetInspector : UnityEditor.Editor { private SerializedProperty atlasFile, materials; private AtlasAsset atlasAsset; - private List baked; - private List bakedObjects; void OnEnable () { SpineEditorUtilities.ConfirmInitialization(); @@ -53,8 +52,14 @@ namespace Spine.Unity.Editor { materials = serializedObject.FindProperty("materials"); materials.isExpanded = true; atlasAsset = (AtlasAsset)target; + #if REGION_BAKING_MESH UpdateBakedList(); + #endif } + + #if REGION_BAKING_MESH + private List baked; + private List bakedObjects; void UpdateBakedList () { AtlasAsset asset = (AtlasAsset)target; @@ -78,13 +83,72 @@ namespace Spine.Unity.Editor { } } } + #endif + + static public void UpdateSpriteSlices (Texture texture, Atlas atlas) { + string texturePath = AssetDatabase.GetAssetPath(texture.GetInstanceID()); + var t = (TextureImporter)TextureImporter.GetAtPath(texturePath); + t.spriteImportMode = SpriteImportMode.Multiple; + var spriteSheet = t.spritesheet; + var sprites = new List(spriteSheet); + + FieldInfo field = typeof(Atlas).GetField("regions", BindingFlags.Instance | BindingFlags.NonPublic); + var regions = (List)field.GetValue(atlas); + int textureHeight = texture.height; + char[] FilenameDelimiter = {'.'}; + int updatedCount = 0; + int addedCount = 0; + + foreach (var r in regions) { + int width, height; + if (r.rotate) { + width = r.height; + height = r.width; + } else { + width = r.width; + height = r.height; + } + + int x = r.x; + int y = textureHeight - height - r.y; + + string pageName = r.page.name.Split(FilenameDelimiter, StringSplitOptions.RemoveEmptyEntries)[0]; + string textureName = texture.name; + bool pageMatch = string.Equals(pageName, textureName,StringComparison.Ordinal); + int spriteIndex = pageMatch ? sprites.FindIndex( + (s) => string.Equals(s.name, r.name, StringComparison.Ordinal) + ) : -1; + bool matchFound = spriteIndex >= 0; + + if (matchFound) { + var s = sprites[spriteIndex]; + s.rect = new Rect(x, y, width, height); + sprites[spriteIndex] = s; + updatedCount++; + } else { + if (pageMatch) { + sprites.Add(new SpriteMetaData { + name = r.name, + pivot = new Vector2(0.5f, 0.5f), + rect = new Rect(x, y, width, height) + }); + addedCount++; + } + } + } + + t.spritesheet = sprites.ToArray(); + EditorUtility.SetDirty(t); + AssetDatabase.ImportAsset(texturePath, ImportAssetOptions.ForceUpdate); + Debug.Log(string.Format("Applied sprite slices to {2}. {0} added. {1} updated.", addedCount, updatedCount, texture.name)); + } override public void OnInspectorGUI () { serializedObject.Update(); - AtlasAsset asset = (AtlasAsset)target; - + atlasAsset = atlasAsset ?? (AtlasAsset)target; EditorGUI.BeginChangeCheck(); EditorGUILayout.PropertyField(atlasFile); + EditorGUILayout.PropertyField(materials, true); if (EditorGUI.EndChangeCheck()) serializedObject.ApplyModifiedProperties(); @@ -103,6 +167,22 @@ namespace Spine.Unity.Editor { } } + if (atlasFile.objectReferenceValue != null) { + if (GUILayout.Button( + new GUIContent( + "Apply Regions as Texture Sprite Slices", + "Adds Sprite slices to atlas texture(s). " + + "Updates existing slices if ones with matching names exist. \n\n" + + "If your atlas was exported with Premultiply Alpha, " + + "your SpriteRenderer should use the generated Spine _Material asset (or any Material with a PMA shader) instead of Sprites-Default.") + , GUILayout.Height(70f))) { + var atlas = atlasAsset.GetAtlas(); + foreach (var m in atlasAsset.materials) + UpdateSpriteSlices(m.mainTexture, atlas); + } + } + + #if REGION_BAKING_MESH if (atlasFile.objectReferenceValue != null) { Atlas atlas = asset.GetAtlas(); FieldInfo field = typeof(Atlas).GetField("regions", BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.NonPublic); @@ -206,13 +286,14 @@ namespace Spine.Unity.Editor { } #endif - + } + #endif if (serializedObject.ApplyModifiedProperties() || (UnityEngine.Event.current.type == EventType.ValidateCommand && UnityEngine.Event.current.commandName == "UndoRedoPerformed") ) { - asset.Reset(); + atlasAsset.Reset(); } } } From 7b03506b24475105c1aaf9a57e95b1c2d1415d7a Mon Sep 17 00:00:00 2001 From: John Date: Sun, 11 Sep 2016 22:24:03 +0800 Subject: [PATCH 13/14] [unity] Added sprite slices button feedback. --- .../Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs | 1 + 1 file changed, 1 insertion(+) diff --git a/spine-unity/Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs b/spine-unity/Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs index 6c831ebd4..4531e5be8 100644 --- a/spine-unity/Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs +++ b/spine-unity/Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs @@ -140,6 +140,7 @@ namespace Spine.Unity.Editor { t.spritesheet = sprites.ToArray(); EditorUtility.SetDirty(t); AssetDatabase.ImportAsset(texturePath, ImportAssetOptions.ForceUpdate); + EditorGUIUtility.PingObject(texture); Debug.Log(string.Format("Applied sprite slices to {2}. {0} added. {1} updated.", addedCount, updatedCount, texture.name)); } From 6b5e47632499b972a1b5d723fd7347bf1c6a7ac1 Mon Sep 17 00:00:00 2001 From: NathanSweet Date: Tue, 13 Sep 2016 08:39:46 +0200 Subject: [PATCH 14/14] Readme --- spine-ts/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spine-ts/README.md b/spine-ts/README.md index 902ac703b..0717e5533 100644 --- a/spine-ts/README.md +++ b/spine-ts/README.md @@ -73,7 +73,7 @@ setup a development environment, follow these steps. 5. Start the TypeScript compiler in watcher mode for the backend you want to work on: * **Core**: `tsc -w -p tsconfig.core.json`, builds `core/src`, outputs `build/spine-core.js|d.ts|js.map` * **WebGL**: `tsc -w -p tsconfig.webgl.json`, builds `core/src` and `webgl/src`, outputs `build/spine-webgl.js|d.ts|js.map` - * **WebGL**: `tsc -w -p tsconfig.canvas.json`, builds `core/src` and `canvas/src`, outputs `build/spine-canvas.js|d.ts|js.map` + * **Canvas**: `tsc -w -p tsconfig.canvas.json`, builds `core/src` and `canvas/src`, outputs `build/spine-canvas.js|d.ts|js.map` * **THREE.JS**: `tsc -w -p tsconfig.threejs.json`, builds `core/src` and `threejs/src`, outputs `build/spine-threejs.js|d.ts|js.map` * **Widget**: `tsc -w -p tsconfig.widget.json`, builds `core/src` and `widget/src`, outputs `build/spine-widget.js|d.ts|js.map` 6. Open the `spine-ts` folder in Visual Studio Code. VS Code will use the `tsconfig.json` file all source files from core and all