Pixi.js: How is sprite tinting implemented and can I calculate a tint from an original and expected value?

[staff0rd]

I took a look at SpriteRenderer and saw that the tint value gets added to the buffer, but I don't understand what this means functionally. Any hints or links helping me understand what is happening in that class would be great, but also, can anyone point out how the tint is being applied?

More specifically, I am trying to make a "brighten effect" by using a reverse tint. For example, I have a sprite that is of color 0x00838f. In a graphics editor make the sprite "20%" brighter, so the color is now 0x339CA5. In pixi, I then want to apply a tint to the sprite, of value X, so the resulting tinted color is the original 0x00838F. I'll remove the tint when I want to make the sprite brighter.

Is it possible to do this? If so, how can I calculate what X would be? If it's not possible, is it possible to calculate it the other way round, where I know the tint value before hand I use that to calculate what color I should make the brightened sprite?

[ivanpopelyshev]

there's no "20% brighter" tint, it can only go down. As for the latter, multiply each component (R,G,B) by 120% and you'll get what you want.

[staff0rd]

I'm aware of that, that's why i'm proposing to do it in reverse...

[englercj]

Tint is applied in the shader: https://github.com/pixijs/pixi.js/blob/master/src/core/sprites/webgl/generateMultiTextureShader.js#L14

The tint color is added to the buffer, uploaded as an attribute, and passed to the fragment shader via a varying. We then multiply the texture color by the tint color.

To figure out what you should pass as the tint, first think about what happens when you multiply colors in glsl. First of all colors are represented as normalized vec4s. SO lets do that version real fast:

// note: I am rounding a bit
0x00838f = vec4(0.00, 0.51, 0.56, 1.00);
0x339CA5 = vec4(0.20, 0.61, 0.65, 1.00);

Now you can see what we do is a vec4 * vec4 which is a component-wise multiplication. So, the formula you are solving is:

originalColor * tintColor = finalColor;
tintColor = finalColor / originalColor;

So,

// 0x339CA5 (final) / 0x00838f (original)
vec4(0.20, 0.61, 0.65, 1.00) / vec4(0.00, 0.51, 0.56, 1.00);

As you can see, there is a green and blue value that will make this work; but there is no red value you can pass to tint your 0x00 red channel to be 0x33. Obviously, anything multiplied by 0 is 0. But hopefully this gets you on the right path with how to do calculate your required tint color.

You can achieve your desired effect by changing your original color to more of a 0x01838f, so you have a red channel to multiply against. That being said, ColorMatrixFilter might be more what you are looking for so I would experiment with that as well.

Hope this helps!

[staff0rd]

Most of the problem I was having was due to not really understanding the vector math, or what component-wise multiplication was. I ended up writing a pen to calculate either the tint or the bright colour required.

This also led me to determine that the bright colour we were specifying as a 20% brighter shade was being mixed differently to how pixi would have applied a tint (ie; the presence of the red channel).

Extremely helpful @englercj, most appreciated!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.