[ts][canvas] Minor fix to triangle renderer, improve examples

examples/export/runtimes.sh

@@ -448,6 +448,7 @@ cp -f ../sack/export/sack-pma.png "$ROOT/spine-ts/spine-webgl/example/assets/"
 cp -f ../celestial-circus/export/* "$ROOT/spine-ts/spine-webgl/example/assets/"
 
 rm "$ROOT/spine-ts/spine-canvas/example/assets/"*
+cp -f ../spineboy/export/spineboy-pro.skel "$ROOT/spine-ts/spine-canvas/example/assets/"
 cp -f ../spineboy/export/spineboy-ess.json "$ROOT/spine-ts/spine-canvas/example/assets/"
 cp -f ../spineboy/export/spineboy.atlas "$ROOT/spine-ts/spine-canvas/example/assets/"
 cp -f ../spineboy/export/spineboy.png "$ROOT/spine-ts/spine-canvas/example/assets/"

spine-ts/spine-canvas/example/index.html

@@ -21,19 +21,19 @@
 		canvas = document.getElementById("canvas");
 		context = canvas.getContext("2d");
 		skeletonRenderer = new spine.SkeletonRenderer(context);
-		// skeletonRenderer.triangleRendering = true;
+		skeletonRenderer.triangleRendering = true;
 
 		// Load the assets.
-		assetManager = new spine.AssetManager("https://esotericsoftware.com/files/examples/4.0/spineboy/export/");
-		assetManager.loadText("spineboy-ess.json");
+		assetManager = new spine.AssetManager("assets/");
+		assetManager.loadBinary("spineboy-pro.skel");
 		assetManager.loadTextureAtlas("spineboy.atlas");
 		await assetManager.loadAll();
 
 		// Create the texture atlas and skeleton data.
 		let atlas = assetManager.require("spineboy.atlas");
 		let atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-		let skeletonJson = new spine.SkeletonJson(atlasLoader);
-		let skeletonData = skeletonJson.readSkeletonData(assetManager.require("spineboy-ess.json"));
+		let skeletonBinary = new spine.SkeletonBinary(atlasLoader);
+		let skeletonData = skeletonBinary.readSkeletonData(assetManager.require("spineboy-pro.skel"));
 
 		// Instantiate a new skeleton based on the atlas and skeleton data.
 		skeleton = new spine.Skeleton(skeletonData);

spine-ts/spine-canvas/example/mouse-click.html

@@ -24,8 +24,8 @@
 		skeletonRenderer.triangleRendering = true;
 
 		// Load the assets.
-		assetManager = new spine.AssetManager("https://esotericsoftware.com/files/examples/4.0/spineboy/export/");
-		assetManager.loadText("spineboy-pro.json");
+		assetManager = new spine.AssetManager("assets/");
+		assetManager.loadText("spineboy-ess.json");
 		assetManager.loadTextureAtlas("spineboy.atlas");
 		await assetManager.loadAll();
 
@@ -33,7 +33,7 @@
 		let atlas = assetManager.require("spineboy.atlas");
 		let atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		let skeletonJson = new spine.SkeletonJson(atlasLoader);
-		let skeletonData = skeletonJson.readSkeletonData(assetManager.require("spineboy-pro.json"));
+		let skeletonData = skeletonJson.readSkeletonData(assetManager.require("spineboy-ess.json"));
 
 		// Instantiate a new skeleton based on the atlas and skeleton data.
 		skeleton = new spine.Skeleton(skeletonData);

spine-ts/spine-canvas/src/SkeletonRenderer.ts

@@ -178,12 +178,14 @@ export class SkeletonRenderer {
 		x2: number, y2: number, u2: number, v2: number) {
 		let ctx = this.ctx;
 
-		u0 *= img.width;
-		v0 *= img.height;
-		u1 *= img.width;
-		v1 *= img.height;
-		u2 *= img.width;
-		v2 *= img.height;
+		const width = img.width - 1;
+		const height = img.height - 1;
+		u0 *= width;
+		v0 *= height;
+		u1 *= width;
+		v1 *= height;
+		u2 *= width;
+		v2 *= height;
 
 		ctx.beginPath();
 		ctx.moveTo(x0, y0);
@@ -201,17 +203,19 @@ export class SkeletonRenderer {
 		u2 -= u0;
 		v2 -= v0;
 
-		var det = 1 / (u1 * v2 - u2 * v1),
+		let det = u1 * v2 - u2 * v1;
+		if (det == 0) return;
+		det = 1 / det;
 
-			// linear transformation
-			a = (v2 * x1 - v1 * x2) * det,
-			b = (v2 * y1 - v1 * y2) * det,
-			c = (u1 * x2 - u2 * x1) * det,
-			d = (u1 * y2 - u2 * y1) * det,
+		// linear transformation
+		const a = (v2 * x1 - v1 * x2) * det;
+		const b = (v2 * y1 - v1 * y2) * det;
+		const c = (u1 * x2 - u2 * x1) * det;
+		const d = (u1 * y2 - u2 * y1) * det;
 
-			// translation
-			e = x0 - a * u0 - c * v0,
-			f = y0 - b * u0 - d * v0;
+		// translation
+		const e = x0 - a * u0 - c * v0;
+		const f = y0 - b * u0 - d * v0;
 
 		ctx.save();
 		ctx.transform(a, b, c, d, e, f);