Add darktint to Spine (#42)

Co-authored-by: Zyie <[email protected]>
pixijs · Sep 12, 2024 · a992607 · a992607
1 parent 70bcff3
commit a992607
Show file tree

Hide file tree

Showing 11 changed files with 413 additions and 124 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,11 +42,11 @@
   },
   "devDependencies": {
     "@pixi/extension-scripts": "^2.4.1",
-    "pixi.js": "^8.1.3",
+    "pixi.js": "8.4.0",
     "typescript": "^5.4.2"
   },
   "peerDependencies": {
-    "pixi.js": "^8.1.2"
+    "pixi.js": "^8.4.0"
   },
   "engines": {
     "node": ">=16",

diff --git a/src/BatchableSpineSlot.ts b/src/BatchableSpineSlot.ts
@@ -29,83 +29,46 @@
 
 import { AttachmentCacheData, Spine } from './Spine';
 
-import type { Batch, BatchableObject, Batcher, BLEND_MODES, IndexBufferArray, Texture } from 'pixi.js';
+import type { Batch, Batcher, BLEND_MODES, DefaultBatchableMeshElement, Matrix, Texture } from 'pixi.js';
 
-export class BatchableSpineSlot implements BatchableObject
+export class BatchableSpineSlot implements DefaultBatchableMeshElement
 {
-    indexStart: number;
-    textureId: number;
-    texture: Texture;
-    location: number;
-    batcher: Batcher;
-    batch: Batch;
+    indexOffset = 0;
+    attributeOffset = 0;
+
+    indexSize: number;
+    attributeSize: number;
+
+    batcherName = 'darkTint';
+
+    readonly packAsQuad = false;
+
     renderable: Spine;
 
-    vertices: Float32Array;
+    positions: Float32Array;
     indices: number[] | Uint16Array;
     uvs: Float32Array;
 
-    indexSize: number;
-    vertexSize: number;
-
     roundPixels: 0 | 1;
     data: AttachmentCacheData;
     blendMode: BLEND_MODES;
 
-    setData(
-        renderable:Spine,
-        data:AttachmentCacheData,
-        texture:Texture,
-        blendMode:BLEND_MODES,
-        roundPixels: 0 | 1)
-    {
-        this.renderable = renderable;
-        this.data = data;
+    darkTint: number;
 
-        if (data.clipped)
-        {
-            const clippedData = data.clippedData;
-
-            this.indexSize = clippedData.indicesCount;
-            this.vertexSize = clippedData.vertexCount;
-            this.vertices = clippedData.vertices;
-            this.indices = clippedData.indices;
-            this.uvs = clippedData.uvs;
-        }
-        else
-        {
-            this.indexSize = data.indices.length;
-            this.vertexSize = data.vertices.length / 2;
-            this.vertices = data.vertices;
-            this.indices = data.indices;
-            this.uvs = data.uvs;
-        }
-
-        this.texture = texture;
-        this.roundPixels = roundPixels;
-
-        this.blendMode = blendMode;
-    }
+    texture: Texture;
 
-    packIndex(indexBuffer: IndexBufferArray, index: number, indicesOffset: number)
-    {
-        const indices = this.indices;
+    transform: Matrix;
 
-        for (let i = 0; i < indices.length; i++)
-        {
-            indexBuffer[index++] = indices[i] + indicesOffset;
-        }
-    }
+    // used internally by batcher specific..
+    // stored for efficient updating..
+    _textureId: number;
+    _attributeStart: number;
+    _indexStart: number;
+    _batcher: Batcher;
+    _batch: Batch;
 
-    packAttributes(
-        float32View: Float32Array,
-        uint32View: Uint32Array,
-        index: number,
-        textureId: number
-    )
+    get color()
     {
-        const { uvs, vertices, vertexSize } = this;
-
         const slotColor = this.data.color;
 
         const parentColor:number = this.renderable.groupColor;
@@ -131,34 +94,53 @@ export class BatchableSpineSlot implements BatchableObject
             abgr = ((mixedA) << 24) | ((slotColor.b * 255) << 16) | ((slotColor.g * 255) << 8) | (slotColor.r * 255);
         }
 
-        const matrix = this.renderable.groupTransform;
+        return abgr;
+    }
+
+    get darkColor()
+    {
+        const darkColor = this.data.darkColor;
+
+        return ((darkColor.a) << 24) | ((darkColor.b * 255) << 16) | ((darkColor.g * 255) << 8) | (darkColor.r * 255);
+    }
 
-        const a = matrix.a;
-        const b = matrix.b;
-        const c = matrix.c;
-        const d = matrix.d;
-        const tx = matrix.tx;
-        const ty = matrix.ty;
+    get groupTransform() { return this.renderable.groupTransform; }
 
-        const textureIdAndRound = (textureId << 16) | (this.roundPixels & 0xFFFF);
+    setData(
+        renderable:Spine,
+        data:AttachmentCacheData,
+        texture:Texture,
+        blendMode:BLEND_MODES,
+        roundPixels: 0 | 1)
+    {
+        this.renderable = renderable;
+        this.transform = renderable.groupTransform;
+        this.data = data;
 
-        for (let i = 0; i < vertexSize; i++)
+        if (data.clipped)
         {
-            const x = vertices[i * 2];
-            const y = vertices[(i * 2) + 1];
+            const clippedData = data.clippedData;
 
-            float32View[index++] = (a * x) + (c * y) + tx;
-            float32View[index++] = (b * x) + (d * y) + ty;
+            this.indexSize = clippedData.indicesCount;
+            this.attributeSize = clippedData.vertexCount;
+            this.positions = clippedData.vertices;
+            this.indices = clippedData.indices;
+            this.uvs = clippedData.uvs;
+        }
+        else
+        {
+            this.indexSize = data.indices.length;
+            this.attributeSize = data.vertices.length / 2;
+            this.positions = data.vertices;
+            this.indices = data.indices;
+            this.uvs = data.uvs;
+        }
 
-            // uv
-            float32View[index++] = uvs[i * 2];
-            float32View[index++] = uvs[(i * 2) + 1];
+        this.texture = texture;
+        this.roundPixels = roundPixels;
 
-            // color
-            uint32View[index++] = abgr;
+        this.blendMode = blendMode;
 
-            // texture id
-            uint32View[index++] = textureIdAndRound;
-        }
+        this.batcherName = data.darkTint ? 'darkTint' : 'default';
     }
 }
diff --git a/src/Spine.ts b/src/Spine.ts
@@ -37,7 +37,7 @@ import {
     DestroyOptions,
     PointData,
     Ticker,
-    View,
+    ViewContainer,
 } from 'pixi.js';
 import { ISpineDebugRenderer } from './SpineDebugRenderer';
 import {
@@ -101,6 +101,8 @@ export interface AttachmentCacheData
     uvs: Float32Array;
     indices: number[];
     color: Color;
+    darkColor: Color | null;
+    darkTint: boolean;
     skipRender: boolean;
     clippedData?: {
         vertices: Float32Array;
@@ -111,16 +113,13 @@ export interface AttachmentCacheData
     };
 }
 
-export class Spine extends Container implements View
+export class Spine extends ViewContainer
 {
     // Pixi properties
     public batched = true;
     public buildId = 0;
     public override readonly renderPipeId = 'spine';
     public _didSpineUpdate = false;
-    public _boundsDirty = true;
-    public _roundPixels: 0 | 1;
-    private _bounds: Bounds = new Bounds();
 
     public beforeUpdateWorldTransforms: (object: Spine) => void = () => { /** */ };
     public afterUpdateWorldTransforms: (object: Spine) => void = () => { /** */ };
@@ -425,6 +424,7 @@ export class Spine extends Container implements View
                     const skeleton = slot.bone.skeleton;
                     const skeletonColor = skeleton.color;
                     const slotColor = slot.color;
+
                     const attachmentColor = attachment.color;
 
                     cacheData.color.set(
@@ -434,6 +434,13 @@ export class Spine extends Container implements View
                         skeletonColor.a * slotColor.a * attachmentColor.a,
                     );
 
+                    cacheData.darkTint = !!slot.darkColor;
+
+                    if (slot.darkColor)
+                    {
+                        cacheData.darkColor.setFromColor(slot.darkColor);
+                    }
+
                     cacheData.skipRender = cacheData.clipped = false;
 
                     if (clipper.isClipping())
@@ -585,6 +592,8 @@ export class Spine extends Container implements View
                 indices: [0, 1, 2, 0, 2, 3],
                 uvs: attachment.uvs as Float32Array,
                 color: new Color(1, 1, 1, 1),
+                darkColor: new Color(0, 0, 0, 0),
+                darkTint: false,
                 skipRender: false,
             };
         }
@@ -599,6 +608,8 @@ export class Spine extends Container implements View
                 indices: attachment.triangles,
                 uvs: attachment.uvs as Float32Array,
                 color: new Color(1, 1, 1, 1),
+                darkColor: new Color(0, 0, 0, 0),
+                darkTint: false,
                 skipRender: false,
             };
         }
@@ -761,21 +772,6 @@ export class Spine extends Container implements View
         bounds.addBounds(this.bounds);
     }
 
-    public containsPoint(point: PointData)
-    {
-        const bounds = this.bounds;
-
-        if (point.x >= bounds.minX && point.x <= bounds.maxX)
-        {
-            if (point.y >= bounds.minY && point.y <= bounds.maxY)
-            {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
     /**
      * Destroys this sprite renderable and optionally its texture.
      * @param options - Options parameter. A boolean will act as if all options
@@ -797,17 +793,6 @@ export class Spine extends Container implements View
         this.attachmentCacheData = null as any;
     }
 
-    /** Whether or not to round the x/y position of the sprite. */
-    get roundPixels()
-    {
-        return !!this._roundPixels;
-    }
-
-    set roundPixels(value: boolean)
-    {
-        this._roundPixels = value ? 1 : 0;
-    }
-
     /** Converts a point from the skeleton coordinate system to the Pixi world coordinate system. */
     public skeletonToPixiWorldCoordinates(point: { x: number; y: number })
     {

diff --git a/src/SpineDebugRenderer.ts b/src/SpineDebugRenderer.ts
@@ -179,7 +179,7 @@ export class SpineDebugRenderer implements ISpineDebugRenderer
         debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.pathsLine);
         debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.eventText);
 
-        debugDisplayObjects.parentDebugContainer.zIndex = 9999999;
+        (debugDisplayObjects.parentDebugContainer as any).zIndex = 9999999;
 
         // Disable screen reader and mouse input on debug objects.
         (debugDisplayObjects.parentDebugContainer as any).accessibleChildren = false;

diff --git a/src/SpinePipe.ts b/src/SpinePipe.ts
@@ -111,7 +111,7 @@ export class SpinePipe implements RenderPipe<Spine>
 
                 if (!cacheData.skipRender)
                 {
-                    batcher.addToBatch(batchableSpineSlot);
+                    batcher.addToBatch(batchableSpineSlot, instructionSet);
                 }
             }
 
@@ -122,7 +122,7 @@ export class SpinePipe implements RenderPipe<Spine>
                 const container = containerAttachment.container;
 
                 container.includeInBuild = true;
-                collectAllRenderables(container, instructionSet, this.renderer.renderPipes);
+                collectAllRenderables(container, instructionSet, this.renderer);
                 container.includeInBuild = false;
             }
         }
@@ -152,7 +152,7 @@ export class SpinePipe implements RenderPipe<Spine>
                 {
                     const batchableSpineSlot = gpuSpine.slotBatches[spine._getCachedData(slot, attachment).id];
 
-                    batchableSpineSlot.batcher?.updateElement(batchableSpineSlot);
+                    batchableSpineSlot._batcher?.updateElement(batchableSpineSlot);
                 }
             }
         }