diff --git a/src/scene/container/utils/mixColors.ts b/src/scene/container/utils/mixColors.ts index e8d99cf034..107274cdd4 100644 --- a/src/scene/container/utils/mixColors.ts +++ b/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; +} diff --git a/src/scene/graphics/shared/BatchableGraphics.ts b/src/scene/graphics/shared/BatchableGraphics.ts index 625eee7094..46aa05f608 100644 --- a/src/scene/graphics/shared/BatchableGraphics.ts +++ 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; diff --git a/tests/visual/scenes/graphics/graphics-tint.scene.ts b/tests/visual/scenes/graphics/graphics-tint.scene.ts new file mode 100644 index 0000000000..8a612483c3 --- /dev/null +++ b/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); + }, +}; diff --git a/tests/visual/snapshots/graphics-tint-scene-ts-webgl1.png b/tests/visual/snapshots/graphics-tint-scene-ts-webgl1.png new file mode 100644 index 0000000000..a6fd865aa6 Binary files /dev/null and b/tests/visual/snapshots/graphics-tint-scene-ts-webgl1.png differ diff --git a/tests/visual/snapshots/graphics-tint-scene-ts-webgl2.png b/tests/visual/snapshots/graphics-tint-scene-ts-webgl2.png new file mode 100644 index 0000000000..a6fd865aa6 Binary files /dev/null and b/tests/visual/snapshots/graphics-tint-scene-ts-webgl2.png differ diff --git a/tests/visual/snapshots/graphics-tint-scene-ts-webgpu.png b/tests/visual/snapshots/graphics-tint-scene-ts-webgpu.png new file mode 100644 index 0000000000..8ec0923794 Binary files /dev/null and b/tests/visual/snapshots/graphics-tint-scene-ts-webgpu.png differ