diff --git a/spine-ts/README.md b/spine-ts/README.md
index 6343767fc..1161689b6 100644
--- a/spine-ts/README.md
+++ b/spine-ts/README.md
@@ -6,10 +6,11 @@ up into multiple modules:
1. `spine-core/`, the core classes to load and process Spine skeletons.
1. `spine-webgl/`, a self-contained WebGL backend, built on the core classes.
1. `spine-canvas/`, a self-contained Canvas backend, built on the core classes.
-1. `spine-threejs/`, a self-contained THREE.JS backend, built on the core classes.
+1. `spine-canvaskit/`, a self-contained [CanvasKit](https://skia.org/docs/user/modules/canvaskit/) backend, built on the core classes for CanvasKit, supporting both NodeJS for headless rendering, and browsers.
+1. `spine-threejs/`, a self-contained [THREE.JS](https://threejs.org/) backend, built on the core classes.
1. `spine-player/`, a self-contained player to easily display Spine animations on your website, built on the core classes and WebGL backend.
-1. `spine-phaser/`, a Phaser backend, built on the core classes.
-1. `spine-pixi/`, a Pixi backend, built on the core classes.
+1. `spine-phaser/`, a [Phaser](https://phaser.io/) backend, built on the core classes.
+1. `spine-pixi/`, a [PixiJS](https://pixijs.com/) backend, built on the core classes.
In most cases, the `spine-player` module is best suited for your needs. Please refer to the [Spine Web Player documentation](https://esotericsoftware.com/spine-player) for more information.
@@ -35,9 +36,11 @@ For the official legal terms governing the Spine Runtimes, please read the [Spin
spine-ts works with data exported from Spine 4.2.xx.
-The spine-ts WebGL and Player backends support all Spine features.
+spine-ts Canvas does not support mesh attachments, clipping attachments, or two-color tinting. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting `spine.SkeletonRenderer.useTriangleRendering` to true. Note that this experimental mesh rendering is slow and render with artifacts on some browsers.
-spine-ts Canvas does not support mesh attachments, clipping attachments, or color tinting. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting `spine.SkeletonRenderer.useTriangleRendering` to true. Note that this experimental mesh rendering is slow and render with artifacts on some browsers.
+spine-canvaskit supports all Spine features except two-color tinting.
+
+The spine-webgl and spine-player support all Spine features.
spine-ts THREE.JS does not support two color tinting. The THREE.JS backend provides `SkeletonMesh.zOffset` to avoid z-fighting. Adjust to your near/far plane settings.
@@ -50,20 +53,23 @@ All spine-ts modules are published to [npm](http://npmjs.com) for consumption vi
You can include a module in your project via a `
-// spine-ts Canvas
+// spine-canvas
-// spine-ts WebGL
+// spine-canvaskit
+
+
+// spine-webgl
-// spine-ts Player, which requires a spine-player.css as well
+// spine-player, which requires a spine-player.css as well
Mouse click
+ CanvasKit
+
Pixi
Basic example CanvasKit Example
+ , image: Image };
+
+// CanvasKit blend modes for premultiplied alpha
+function toCkBlendMode(ck: CanvasKit, blendMode: BlendMode) {
+ switch(blendMode) {
+ case BlendMode.Normal: return ck.BlendMode.SrcOver;
+ case BlendMode.Additive: return ck.BlendMode.Plus;
+ case BlendMode.Multiply: return ck.BlendMode.Modulate;
+ case BlendMode.Screen: return ck.BlendMode.Screen;
+ default: return ck.BlendMode.SrcOver;
+ }
+}
+
+export class CanvasKitTexture extends Texture {
+ getImage(): CanvasKitImage {
+ return this._image;
+ }
+
+ setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void {
+ }
+
+ setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void {
+ }
+
+ dispose(): void {
+ const data: CanvasKitImage = this._image;
+ for (const paint of data.paintPerBlendMode.values()) {
+ paint.delete();
+ }
+ for (const shader of data.shaders) {
+ shader.delete();
+ }
+ data.image.delete();
+ this._image = null;
+ }
+
+ static async fromFile(ck: CanvasKit, path: string, readFile: (path: string) => Promise): Promise {
+ const imgData = await readFile(path);
+ if (!imgData) throw new Error(`Could not load image ${path}`);
+ const image = ck.MakeImageFromEncoded(imgData);
+ if (!image) throw new Error(`Could not load image ${path}`);
+ const paintPerBlendMode = new Map();
+ const shaders: Shader[] = [];
+ for (const blendMode of [BlendMode.Normal, BlendMode.Additive, BlendMode.Multiply, BlendMode.Screen]) {
+ const paint = new ck.Paint();
+ const shader = image.makeShaderOptions(ck.TileMode.Clamp, ck.TileMode.Clamp, ck.FilterMode.Linear, ck.MipmapMode.Linear);
+ paint.setShader(shader);
+ paint.setBlendMode(toCkBlendMode(ck, blendMode));
+ paintPerBlendMode.set(blendMode, paint);
+ shaders.push(shader);
+ }
+ return new CanvasKitTexture({ shaders, paintPerBlendMode, image });
+ }
+}
+
+function bufferToUtf8String(buffer: any) {
+ if (typeof Buffer !== 'undefined') {
+ return buffer.toString('utf-8');
+ } else if (typeof TextDecoder !== 'undefined') {
+ return new TextDecoder('utf-8').decode(buffer);
+ } else {
+ throw new Error('Unsupported environment');
+ }
+}
+
+export async function loadTextureAtlas(ck: CanvasKit, atlasFile: string, readFile: (path: string) => Promise): Promise {
+ const atlas = new TextureAtlas(bufferToUtf8String(await readFile(atlasFile)));
+ const slashIndex = atlasFile.lastIndexOf("/");
+ const parentDir = slashIndex >= 0 ? atlasFile.substring(0, slashIndex + 1) : "";
+ for (const page of atlas.pages) {
+ const texture = await CanvasKitTexture.fromFile(ck, parentDir + "/" + page.name, readFile);
+ page.setTexture(texture);
+ }
+ return atlas;
+}
+
+export class SkeletonRenderer {
+ private clipper = new SkeletonClipping();
+ private tempColor = new Color();
+ private tempColor2 = new Color();
+ private static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
+ private scratchPositions = Utils.newFloatArray(100);
+ private scratchColors = Utils.newFloatArray(100);
+ constructor(private ck: CanvasKit) {}
+
+ render(canvas: Canvas, skeleton: Skeleton) {
+ let clipper = this.clipper;
+ let drawOrder = skeleton.drawOrder;
+ let skeletonColor = skeleton.color;
+
+ for (let i = 0, n = drawOrder.length; i < n; i++) {
+ let slot = drawOrder[i];
+ if (!slot.bone.active) {
+ clipper.clipEndWithSlot(slot);
+ continue;
+ }
+
+ let attachment = slot.getAttachment();
+ let positions = this.scratchPositions;
+ let colors = this.scratchColors;
+ let uvs: NumberArrayLike;
+ let texture: CanvasKitTexture;
+ let triangles: Array;
+ let attachmentColor: Color;
+ let numVertices = 0;
+ if (attachment instanceof RegionAttachment) {
+ let region = attachment as RegionAttachment;
+ positions = positions.length < 8 ? Utils.newFloatArray(8) : positions;
+ numVertices = 4;
+ region.computeWorldVertices(slot, positions, 0, 2);
+ triangles = SkeletonRenderer.QUAD_TRIANGLES;
+ uvs = region.uvs as Float32Array;
+ texture = region.region?.texture as CanvasKitTexture;
+ attachmentColor = region.color;
+ } else if (attachment instanceof MeshAttachment) {
+ let mesh = attachment as MeshAttachment;
+ positions = positions.length < mesh.worldVerticesLength ? Utils.newFloatArray(mesh.worldVerticesLength) : positions;
+ numVertices = mesh.worldVerticesLength >> 1;
+ mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, positions, 0, 2);
+ triangles = mesh.triangles;
+ texture = mesh.region?.texture as CanvasKitTexture;
+ uvs = mesh.uvs as Float32Array;
+ attachmentColor = mesh.color;
+ } else if (attachment instanceof ClippingAttachment) {
+ let clip = attachment as ClippingAttachment;
+ clipper.clipStart(slot, clip);
+ continue;
+ } else {
+ clipper.clipEndWithSlot(slot);
+ continue;
+ }
+
+ if (texture) {
+ if (clipper.isClipping()) {
+ clipper.clipTrianglesUnpacked(positions, triangles, triangles.length, uvs);
+ positions = clipper.clippedVertices;
+ uvs = clipper.clippedUVs;
+ triangles = clipper.clippedTriangles;
+ }
+
+ let slotColor = slot.color;
+ let finalColor = this.tempColor;
+ finalColor.r = skeletonColor.r * slotColor.r * attachmentColor.r;
+ finalColor.g = skeletonColor.g * slotColor.g * attachmentColor.g;
+ finalColor.b = skeletonColor.b * slotColor.b * attachmentColor.b;
+ finalColor.a = skeletonColor.a * slotColor.a * attachmentColor.a;
+
+ if (colors.length / 4 < numVertices) colors = Utils.newFloatArray(numVertices * 4);
+ for (let i = 0, n = numVertices * 4; i < n; i += 4) {
+ colors[i] = finalColor.r;
+ colors[i + 1] = finalColor.g;
+ colors[i + 2] = finalColor.b;
+ colors[i + 3] = finalColor.a;
+ }
+
+ const scaledUvs = new Array(uvs.length);
+ const width = texture.getImage().image.width();
+ const height = texture.getImage().image.height();
+ for (let i = 0; i < uvs.length; i+=2) {
+ scaledUvs[i] = uvs[i] * width;
+ scaledUvs[i + 1] = uvs[i + 1] * height;
+ }
+
+ const blendMode = slot.data.blendMode;
+ const vertices = this.ck.MakeVertices(this.ck.VertexMode.Triangles, positions, scaledUvs, colors, triangles, false);
+ canvas.drawVertices(vertices, this.ck.BlendMode.Modulate, texture.getImage().paintPerBlendMode.get(blendMode)!);
+ }
+
+ clipper.clipEndWithSlot(slot);
+ }
+ clipper.clipEnd();
+ }
+}
\ No newline at end of file
diff --git a/spine-ts/spine-canvaskit/tsconfig.json b/spine-ts/spine-canvaskit/tsconfig.json
new file mode 100644
index 000000000..4a16afef6
--- /dev/null
+++ b/spine-ts/spine-canvaskit/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "extends": "../tsconfig.base.json",
+ "compilerOptions": {
+ "baseUrl": ".",
+ "rootDir": "./src",
+ "outDir": "./dist",
+ "paths": {
+ "@esotericsoftware/spine-core": ["../spine-core/src"]
+ }
+ },
+ "include": ["**/*.ts"],
+ "exclude": ["dist/**/*.d.ts"],
+ "references": [
+ {
+ "path": "../spine-core"
+ }
+ ]
+}
diff --git a/spine-ts/spine-core/src/SkeletonBinary.ts b/spine-ts/spine-core/src/SkeletonBinary.ts
index f08847f9c..7e6621a84 100644
--- a/spine-ts/spine-core/src/SkeletonBinary.ts
+++ b/spine-ts/spine-core/src/SkeletonBinary.ts
@@ -64,7 +64,7 @@ export class SkeletonBinary {
this.attachmentLoader = attachmentLoader;
}
- readSkeletonData (binary: Uint8Array): SkeletonData {
+ readSkeletonData (binary: Uint8Array | ArrayBuffer): SkeletonData {
let scale = this.scale;
let skeletonData = new SkeletonData();
@@ -1115,7 +1115,7 @@ export class SkeletonBinary {
}
export class BinaryInput {
- constructor (data: Uint8Array, public strings = new Array(), private index: number = 0, private buffer = new DataView(data.buffer)) {
+ constructor (data: Uint8Array | ArrayBuffer, public strings = new Array(), private index: number = 0, private buffer = new DataView(data instanceof ArrayBuffer ? data : data.buffer)) {
}
readByte (): number {
diff --git a/spine-ts/spine-core/src/Utils.ts b/spine-ts/spine-core/src/Utils.ts
index c821117d2..ddeb4f2c3 100644
--- a/spine-ts/spine-core/src/Utils.ts
+++ b/spine-ts/spine-core/src/Utils.ts
@@ -90,11 +90,6 @@ export class StringSet {
export type NumberArrayLike = Array | Float32Array;
export type IntArrayLike = Array | Int16Array;
-/*export interface NumberArrayLike {
- readonly length: number;
- [n: number]: number;
-}*/
-
export interface Disposable {
dispose (): void;
}
diff --git a/spine-ts/spine-player/src/Player.ts b/spine-ts/spine-player/src/Player.ts
index 611382653..27f9975a1 100644
--- a/spine-ts/spine-player/src/Player.ts
+++ b/spine-ts/spine-player/src/Player.ts
@@ -212,7 +212,7 @@ export class SpinePlayer implements Disposable {
private playTime = 0;
private selectedBones: (Bone | null)[] = [];
- private cancelId = 0;
+ private cancelId: any = 0;
popup: Popup | null = null;
/* True if the player is unable to load or render the skeleton. */
diff --git a/spine-ts/spine-player/src/PlayerEditor.ts b/spine-ts/spine-player/src/PlayerEditor.ts
index 329f0d2ab..955d7c72f 100644
--- a/spine-ts/spine-player/src/PlayerEditor.ts
+++ b/spine-ts/spine-player/src/PlayerEditor.ts
@@ -128,7 +128,7 @@ body { margin: 0px; }
this.startPlayer();
}
- private timerId = 0;
+ private timerId: any = 0;
startPlayer () {
clearTimeout(this.timerId);
this.timerId = setTimeout(() => {
diff --git a/spine-ts/tsconfig.json b/spine-ts/tsconfig.json
index d739fc105..b2f7b54cb 100644
--- a/spine-ts/tsconfig.json
+++ b/spine-ts/tsconfig.json
@@ -1,26 +1,29 @@
{
- "files": [],
- "references": [
- {
- "path": "./spine-core"
- },
- {
- "path": "./spine-canvas"
- },
- {
- "path": "./spine-webgl"
- },
- {
- "path": "./spine-phaser"
- },
- {
- "path": "./spine-player"
- },
- {
- "path": "./spine-threejs"
- },
- {
- "path": "./spine-pixi"
- }
- ]
-}
\ No newline at end of file
+ "files": [],
+ "references": [
+ {
+ "path": "./spine-core"
+ },
+ {
+ "path": "./spine-canvas"
+ },
+ {
+ "path": "./spine-canvaskit"
+ },
+ {
+ "path": "./spine-webgl"
+ },
+ {
+ "path": "./spine-phaser"
+ },
+ {
+ "path": "./spine-player"
+ },
+ {
+ "path": "./spine-threejs"
+ },
+ {
+ "path": "./spine-pixi"
+ }
+ ]
+}