UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-14 11:01:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mario Zechner 2024-07-05 17:53:48 +02:00
parent 4f1cdb3c88
commit 1df497e1e7
5 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/export/runtimes.sh
View File

@ -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/"

BIN
spine-ts/spine-canvas/example/assets/spineboy-pro.skel Normal file
View File

Binary file not shown.

10
spine-ts/spine-canvas/example/index.html
View File

@ -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);

6
spine-ts/spine-canvas/example/mouse-click.html
View File

@ -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);

34
spine-ts/spine-canvas/src/SkeletonRenderer.ts
View File

@ -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);