diff --git a/spine-ts/spine-construct3/spine-construct3-lib/src/C3SkeletonRenderer.ts b/spine-ts/spine-construct3/spine-construct3-lib/src/C3SkeletonRenderer.ts index 0ce899bd2..28219ef5c 100644 --- a/spine-ts/spine-construct3/spine-construct3-lib/src/C3SkeletonRenderer.ts +++ b/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); } }