Sliders for color and lightness

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By pferft

Hi everyone,

I have serveral white Sprites which can be colorized through the editor’s Visibility/Modulate.

I’d like to be able to do this with two horizontal sliders, one for the color and one for the lighness, something like this:

(Oh, I can’t upload a picture here? Well then, here’s a link to a mockup:)

That rad flower-like thing (as well as the knobs) should change its appearance accordingly „in realtime“ while the user drags the knobs around.

I set up an HSlider Node with Icons and Styles as child of a Control Node as a basis. Any idea how I should proceed?

I’m getting an Access Denied error at your Google Drive link. And, for pictures, you need to upload them to a web-accessible location and provide a direct image link.

jgodfrey | 2023-02-28 00:07

Oh, sorry about that, but thanks for trying. (Could you suggest such a web-accessible location? I mean I’m feeling a bit dump because I thought Google Drive would be such a location… I probably missed out on some settings, I guess.)
Meanwhile I uploaded my picture here:
WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free
They should succeed where Google fails ; )

pferft | 2023-02-28 14:56

:bust_in_silhouette: Reply From: exuin

Connect the value_changed signal of the HSlider. Use the value to change the modulate.

Alright, the Signal arrives at the Sprite and it prints the value (from 1 to 100):

func _on_HSlider_value_changed(value):
	print (value)

As I’d like colors of the full “rainbow” to be selectable, I guess 1 would match red and 100 violet, with yellow, green and (light and dark) blue in between.
Maybe I’m thinking in a completely wrong direction, but I’d assume something like this:
value 1: red
value 20: yellow (orange will “automatically mix” in between…)
value 40: green
value 60: light blue (in RGB that would be 0 - 255 - 255)
value 80: dark blue (RGB 0 - 0 - 255)
value100: violet

In my Sprite’s script:

func _on_HSlider_value_changed(value):
	#print (value)
	if (value) == 20:
		modulate = Color(1, 1, 0)

Sliding to position 20 turns my Sprite yellow. So seeting up exact modulates for certain values works! But how could I have the areas in between interpolated “automatically”?

pferft | 2023-02-28 15:35

hue goes between 0 to 1 in Color, just swap your slider to use 0 to 1 and set modulate.h

exuin | 2023-02-28 15:53

I was able to get values between 0 and 1, but now I have a hard time figuring out how to set it up:

func _on_HSlider_value_changed(value):
	if (value) >= 0.5:
		modulate.h = ?

((Color) doesn’t match the variable’s type.)

pferft | 2023-02-28 16:26

modulate.h is a float, like value

exuin | 2023-02-28 17:08

Got it, so instead of fiddling around with something like modulate = Color(1, 1, 1) I should use modulate.h = (0.1).

Trying this:

func _on_HSlider_value_changed(value):
	if (value) >= 0.5:
		modulate.h = (0.9)

This works, the hue changes!

But only on an already colored sprite…

func _ready():
	modulate = Color(1, 0, 0.5)
	modulate.h = (0.4)

→ white Sprite appears greenish

func _ready():
	modulate = Color(1, 1, 1)
	modulate.h = (0.4)

→ white Sprite stays white

func _ready():
	modulate = Color(0.5, 0.5, 0.5)
	modulate.h = (0.4)

→ white Sprite stays grey

So can’t I use a white Sprite for this in the first place?

pferft | 2023-02-28 18:22

That’s just how it works, if you have rgb the same value it’s in grayscale.

exuin | 2023-02-28 19:19

I see, alright then, a white sprite has to be color-modulated before one can hue-modulate it. (I assume that a black sprite cannot be color- or hue-modulated at all.)
But will the choice of the initial color influence the hue’s appearance? I believe it shouldn’t matter, am I right?

pferft | 2023-02-28 19:28

It will. If you have a green image and a red hue, then it will appear gray since those are opposites on the color wheel.

exuin | 2023-02-28 19:34

I was afraid you’d say that…
So the only way to “cleanly” modify the color of a white sprite would be through rgb-values, I suppose.
We’re drifting away from my original post-topic quite a bit, but thank you for these basic-understanding elaborations, they’re quite useful.

I guess setting up interpolation between colors on set slider-values isn’t a trivial task. I just can’t find any really helpful tutorials or demos on that topic, so please let me know if you know some.

pferft | 2023-02-28 19:50

Digging deeper into this (including another post), I set up a solution that works fine for me. For everyone interested to be found in my own reply here:
Programmably adjust a Sprite-Color's „darkness and lightness“ - Archive - Godot Forum

Thanks to exuin for pointing into the right directions!

pferft | 2023-03-02 19:51