Add a tint to an ImageBuffer

Question

I'm writing a program that take many sprites and put them together to make a final output as .png, the thing is each sprite have a rgba color associated with it to tint it.

I found someone repo that is very similar to what I'm doing but instead of exporting it as a png file he is using bevy to render it, and the result is what I'm expecting.

He is just passing the rgba color to bevy Sprite struct: https://docs.rs/bevy/0.8.1/bevy/prelude/struct.Sprite.html.

As the documentation say, the Color is "The sprite’s color tint".

I'm working with the image crate, and colorops does not provide any function for what I want. I have to write the function manually which is ok, but I have no idea what's the algorithm, how do I take 1 rgba pixel of my sprite and mix it with the other rbga to get the tint result I want, the result bevy get.

Despite all my effort looking through the repo of bevy, I couldn't find the algorithm.

So is there other crate maybe that provide such function, or what's the algorithm for it ?

Thank you

Answer 1

The usual algorithm for tinting an image that you might find in a game engine (I don't know if it's what Bevy uses) is to multiply each color component of each pixel of the image by the corresponding color component of the tint. This creates an effect similar to looking at a physical object through a color filter or which is lit by a colored light source.

With image you can use ImageBuffer::pixels_mut to get at each pixel of the image and make a change.

use image::{RgbaImage, Rgb, Rgba};

pub fn tint_image(image: &mut RgbaImage, tint: Rgb<f32>) {
    let Rgb([tint_r, tint_g, tint_b]) = tint;
    for Rgba([r, g, b, _]) in image.pixels_mut() {
        *r = (*r as f32 * tint_r) as u8;
        *g = (*g as f32 * tint_g) as u8;
        *b = (*b as f32 * tint_b) as u8;
    }
}

I am using f32 for the tint color components so that I don't have to worry about scaling by 255, and so that the tint can brighten and not only darken the color, if desired. (Also, I haven't tested this code.)

You should feel free to try using different arithmetic to get the exact effect you want; experimentation will build up your understanding of how algorithms relate to the image on screen.