Fixed debug skeleton position.

Author: davidetan

spine-ts/spine-construct3/spine-construct3-lib/src/C3SkeletonRenderer.ts

@@ -129,8 +129,9 @@ abstract class C3SkeletonRenderer<
 			if (!bone.parent) continue;
 			const boneApplied = bone.applied;
 			const { x: x1, y: y1 } = matrix.skeletonToGame(boneApplied.worldX, boneApplied.worldY);
-			const x2 = bone.data.length * boneApplied.a + x1;
-			const y2 = bone.data.length * boneApplied.c + y1;
+			const endX = boneApplied.worldX + bone.data.length * boneApplied.a;
+			const endY = boneApplied.worldY + bone.data.length * boneApplied.c;
+			const { x: x2, y: y2 } = matrix.skeletonToGame(endX, endY);
 
 			this.setColor(1, 0, 0, 1);
 			this.setColorFillMode();
@@ -163,10 +164,18 @@ abstract class C3SkeletonRenderer<
 			if (attachment instanceof RegionAttachment) {
 				const vertices = this.tempVertices;
 				attachment.computeWorldVertices(slot, vertices, 0, 2);
-				this.line(vertices[0], vertices[1], vertices[2], vertices[3], x, y);
-				this.line(vertices[2], vertices[3], vertices[4], vertices[5], x, y);
-				this.line(vertices[4], vertices[5], vertices[6], vertices[7], x, y);
-				this.line(vertices[6], vertices[7], vertices[0], vertices[1], x, y);
+				let p = matrix.skeletonToGame(vertices[0], vertices[1]);
+				const x1 = p.x, y1 = p.y;
+				p = matrix.skeletonToGame(vertices[2], vertices[3]);
+				const x2 = p.x, y2 = p.y;
+				p = matrix.skeletonToGame(vertices[4], vertices[5]);
+				const x3 = p.x, y3 = p.y;
+				p = matrix.skeletonToGame(vertices[6], vertices[7]);
+				const x4 = p.x, y4 = p.y;
+				this.line(x1, y1, x2, y2);
+				this.line(x2, y2, x3, y3);
+				this.line(x3, y3, x4, y4);
+				this.line(x4, y4, x1, y1);
 			}
 		}
 
@@ -185,22 +194,25 @@ abstract class C3SkeletonRenderer<
 			this.setColor(1, 0.64, 0, 0.5);
 			for (let ii = 0, nn = triangles.length; ii < nn; ii += 3) {
 				const v1 = triangles[ii] * 2, v2 = triangles[ii + 1] * 2, v3 = triangles[ii + 2] * 2;
-				this.triangle(
-					vertices[v1], vertices[v1 + 1],
-					vertices[v2], vertices[v2 + 1],
-					vertices[v3], vertices[v3 + 1],
-					x, y,
-				);
+				let p = matrix.skeletonToGame(vertices[v1], vertices[v1 + 1]);
+				const x1 = p.x, y1 = p.y;
+				p = matrix.skeletonToGame(vertices[v2], vertices[v2 + 1]);
+				const x2 = p.x, y2 = p.y;
+				p = matrix.skeletonToGame(vertices[v3], vertices[v3 + 1]);
+				const x3 = p.x, y3 = p.y;
+				this.triangle(x1, y1, x2, y2, x3, y3);
 			}
 
 			// mesh hulls
 			if (hullLength > 0) {
 				this.setColor(0, 0, 1, 0.5);
 				hullLength = (hullLength >> 1) * 2;
-				let lastX = vertices[hullLength - 2], lastY = vertices[hullLength - 1];
+				let p = matrix.skeletonToGame(vertices[hullLength - 2], vertices[hullLength - 1]);
+				let lastX = p.x, lastY = p.y;
 				for (let ii = 0, nn = hullLength; ii < nn; ii += 2) {
-					const x1 = vertices[ii], y1 = vertices[ii + 1];
-					this.line(x1, y1, lastX, lastY, x, y);
+					p = matrix.skeletonToGame(vertices[ii], vertices[ii + 1]);
+					const x1 = p.x, y1 = p.y;
+					this.line(x1, y1, lastX, lastY);
 					lastX = x1;
 					lastY = y1;
 				}
@@ -216,27 +228,36 @@ abstract class C3SkeletonRenderer<
 			let nn = attachment.worldVerticesLength;
 			const world = this.tempArray = Utils.setArraySize(this.tempArray, nn, 0);
 			attachment.computeWorldVertices(skeleton, slot, 0, nn, world, 0, 2);
-			let x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
+			let p = matrix.skeletonToGame(world[2], world[3]);
+			let x1 = p.x, y1 = p.y, x2 = 0, y2 = 0;
 			if (attachment.closed) {
 				this.setColor(1, 0.5, 0, 1);
-				const cx1 = world[0], cy1 = world[1], cx2 = world[nn - 2], cy2 = world[nn - 1];
-				x2 = world[nn - 4];
-				y2 = world[nn - 3];
-				this.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32, x, y);
+				p = matrix.skeletonToGame(world[0], world[1]);
+				const cx1 = p.x, cy1 = p.y;
+				p = matrix.skeletonToGame(world[nn - 2], world[nn - 1]);
+				const cx2 = p.x, cy2 = p.y;
+				p = matrix.skeletonToGame(world[nn - 4], world[nn - 3]);
+				x2 = p.x;
+				y2 = p.y;
+				this.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
 				this.setColor(.75, .75, .75, 1);
-				this.line(x1, y1, cx1, cy1, x, y);
-				this.line(x2, y2, cx2, cy2, x, y);
+				this.line(x1, y1, cx1, cy1);
+				this.line(x2, y2, cx2, cy2);
 			}
 			nn -= 4;
 			for (let ii = 4; ii < nn; ii += 6) {
-				const cx1 = world[ii], cy1 = world[ii + 1], cx2 = world[ii + 2], cy2 = world[ii + 3];
-				x2 = world[ii + 4];
-				y2 = world[ii + 5];
+				p = matrix.skeletonToGame(world[ii], world[ii + 1]);
+				const cx1 = p.x, cy1 = p.y;
+				p = matrix.skeletonToGame(world[ii + 2], world[ii + 3]);
+				const cx2 = p.x, cy2 = p.y;
+				p = matrix.skeletonToGame(world[ii + 4], world[ii + 5]);
+				x2 = p.x;
+				y2 = p.y;
 				this.setColor(1, 0.5, 0, 1);
-				this.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32, x, y);
+				this.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
 				this.setColor(.75, .75, .75, 1);
-				this.line(x1, y1, cx1, cy1, x, y);
-				this.line(x2, y2, cx2, cy2, x, y);
+				this.line(x1, y1, cx1, cy1);
+				this.line(x2, y2, cx2, cy2);
 				x1 = x2;
 				y1 = y2;
 			}
@@ -253,11 +274,11 @@ abstract class C3SkeletonRenderer<
 			const world = this.tempArray = Utils.setArraySize(this.tempArray, nn, 0);
 			attachment.computeWorldVertices(skeleton, slot, 0, nn, world, 0, 2);
 			for (let i = 0, n = world.length; i < n; i += 2) {
-				const x1 = world[i];
-				const y1 = world[i + 1];
-				const x2 = world[(i + 2) % world.length];
-				const y2 = world[(i + 3) % world.length];
-				this.line(x1, y1, x2, y2, x, y);
+				let p = matrix.skeletonToGame(world[i], world[i + 1]);
+				const x1 = p.x, y1 = p.y;
+				p = matrix.skeletonToGame(world[(i + 2) % world.length], world[(i + 3) % world.length]);
+				const x2 = p.x, y2 = p.y;
+				this.line(x1, y1, x2, y2);
 			}
 		}