fix tint graphics tint

src/scene/container/utils/mixColors.ts

@@ -37,3 +37,25 @@ export function mixStandardAnd32BitColors(localColorRGB: number, localAlpha: num
     return sharedBGRColor + (globalAlpha << 24);
 }
 
+/**
+ * Takes two hex colors, multiplies them together and returns the result.
+ * @param color1 - the first color to multiply
+ * @param color2 - the second color to multiply
+ * @returns - the multiplied color
+ */
+export function multiplyHexColors(color1: number, color2: number): number
+{
+    const r1 = (color1 >> 16) & 0xFF;
+    const g1 = (color1 >> 8) & 0xFF;
+    const b1 = color1 & 0xFF;
+
+    const r2 = (color2 >> 16) & 0xFF;
+    const g2 = (color2 >> 8) & 0xFF;
+    const b2 = color2 & 0xFF;
+
+    const r = r1 * r2;
+    const g = g1 * g2;
+    const b = b1 * b2;
+
+    return (r << 16) + (g << 8) + b;
+}

src/scene/graphics/shared/BatchableGraphics.ts

@@ -1,4 +1,4 @@
-import { mixColors } from '../../container/utils/mixColors';
+import { multiplyHexColors } from '../../container/utils/multiplyHexColors';
 
 import type { Batch, BatchableObject, Batcher } from '../../../rendering/batcher/shared/Batcher';
 import type { IndexBufferArray } from '../../../rendering/renderers/shared/geometry/Geometry';
@@ -70,7 +70,7 @@ export class BatchableGraphics implements BatchableObject
 
         if (this.applyTransform)
         {
-            const argb = mixColors(bgr, graphics.groupColor)
+            const argb = multiplyHexColors(bgr, graphics.groupColor)
             + ((this.alpha * graphics.groupAlpha * 255) << 24);
 
             const wt = graphics.groupTransform;

tests/visual/scenes/graphics/graphics-tint.scene.ts

@@ -0,0 +1,18 @@
+import { Graphics } from '../../../../src/scene/graphics/shared/Graphics';
+
+import type { Container } from '../../../../src/scene/container/Container';
+import type { TestScene } from '../../types';
+
+export const scene: TestScene = {
+    it: 'should set tint of graphics correctly',
+    only: true,
+    create: async (scene: Container) =>
+    {
+        const rect = new Graphics().rect(0, 0, 100, 100).fill('black');
+
+        // should remain black!
+        rect.tint = 0xff0000;
+
+        scene.addChild(rect);
+    },
+};