Images affected by Color Grading gamma value

Unity Engine
, , ,
1

I want to create a brightness slider for my game. I have implemented the entire functionality behind it using PostProcessing. See Color Grading → Linear → Gamma.

The problem is finding the correct brightness is a lot of trial and error. You have to adjust brightness go out of the menu, check if its correct and repeat the process x times.

To make the process of selecting the correct brightness easier I want to implement something seen in a lot of games. A brightness adjustment screen until a logo is barely visible.

My question is how can I do this in Unity?

The Unity version I’m using: 2021.3.5f1.

2

What is your question? How to implement the UI from the screenshot?

3

Yes, my question is how I can implement an UI like in the picture. Whenever the user drags the slider the 3 images change their color according to the gamma value.

I should also note that the gamma values range from -1 to 1.

4

I managed to solve this problem myself and it was easier than I thought.

You just have to reference your images like this:

[SerializeField] private Image _brightnessNotVisibleImage;
    [SerializeField] private Image _brightnessBarelyVisibleImage;
    [SerializeField] private Image _brightnessVisibleImage;

And make your slider execute this function whenever his value changes:

public void UpdateImageBrightness(float brightness)
    {
        float notVisibleBrightness = Mathf.Lerp(0.0f, 1.0f, brightness - 0.1f);
        _brightnessNotVisibleImage.color = new Color(notVisibleBrightness, notVisibleBrightness, notVisibleBrightness, 1.0f);

        float barelyVisibleBrightness = Mathf.Lerp(0.0f, 1.0f, brightness);
        _brightnessBarelyVisibleImage.color = new Color(barelyVisibleBrightness, barelyVisibleBrightness, barelyVisibleBrightness, 1.0f);

        float visibleBrightness = Mathf.Lerp(0.0f, 1.0f, brightness + 0.1f);
        _brightnessVisibleImage.color = new Color(visibleBrightness, visibleBrightness, visibleBrightness, 1.0f);
    }

I hope this helps someone in the future.

5

Wouldn’t it make more sense to just update the gamma in your post processing when you move the slider? That way the user can see what they’re actually adjusting.

1 Like