[ts][pixi] DarkTint renderer is registered by the runtime. DarkTintMesh is automatically used if a slot has dark color.

Author: davidetan

spine-ts/spine-pixi/src/Spine.ts

@@ -46,6 +46,7 @@ import {
 } from "@esotericsoftware/spine-core";
 import type { SpineTexture } from "./SpineTexture.js";
 import { SlotMesh } from "./SlotMesh.js";
+import { DarkSlotMesh } from "./DarkSlotMesh.js";
 import type { ISpineDebugRenderer } from "./SpineDebugRenderer.js";
 import { Assets } from "@pixi/assets";
 import type { IPointData } from "@pixi/core";
@@ -85,7 +86,7 @@ export class Spine extends Container {
 		this._debug = value;
 	}
 
-	protected slotMeshFactory: () => ISlotMesh;
+	protected slotMeshFactory: () => ISlotMesh = ((): ISlotMesh => new SlotMesh());
 
 	private autoUpdateWarned: boolean = false;
 	private _autoUpdate: boolean = true;
@@ -122,11 +123,24 @@ export class Spine extends Container {
 		const animData = new AnimationStateData(skeletonData);
 		this.state = new AnimationState(animData);
 		this.autoUpdate = options?.autoUpdate ?? true;
-		this.slotMeshFactory = options?.slotMeshFactory ?? ((): ISlotMesh => new SlotMesh());
+		this.initializeMeshFactory(options);
 		this.skeleton.setToSetupPose();
 		this.skeleton.updateWorldTransform(Physics.update);
 	}
 
+	private initializeMeshFactory(options?: ISpineOptions) {
+		if (options?.slotMeshFactory) {
+			this.slotMeshFactory = options?.slotMeshFactory;
+		} else {
+			for (let i = 0; i < this.skeleton.slots.length; i++) {
+				if (this.skeleton.slots[i].data.darkColor) {
+					this.slotMeshFactory = options?.slotMeshFactory ?? ((): ISlotMesh => new DarkSlotMesh());
+					break;
+				}
+			}
+		}
+	}
+
 	public update (deltaSeconds: number): void {
 		if (this.autoUpdate && !this.autoUpdateWarned) {
 			console.warn("You are calling update on a Spine instance that has autoUpdate set to true. This is probably not what you want.");

spine-ts/spine-pixi/src/darkTintMesh/DarkTintRenderer.ts

@@ -30,7 +30,7 @@
 import type { IDarkTintElement } from "./DarkTintMesh.js";
 import { DarkTintBatchGeometry } from "./DarkTintBatchGeom.js";
 import type { ExtensionMetadata, Renderer, ViewableBuffer } from "@pixi/core";
-import { BatchRenderer, ExtensionType, BatchShaderGenerator, Color } from "@pixi/core";
+import { extensions, BatchRenderer, ExtensionType, BatchShaderGenerator, Color } from "@pixi/core";
 
 const vertex = `
 precision highp float;
@@ -117,3 +117,5 @@ export class DarkTintRenderer extends BatchRenderer {
 		}
 	}
 }
+
+extensions.add(DarkTintRenderer);