How do I customize a ColorPicker?

Question

The default ColorPicker setup includes many parameters and tools which is great, but it also means it is very cumbersome to use on smartphones. Is there a way to remove the sliders, "raw" text input area and so on, leaving only the hue bar to the side and the color picking panel?

Comments

I don't think there is an "easy" way to do this, but those elements are made with hidden nodes that you can actually get at runtime with a script. That means you could hide or resize them in a way they take the space you want, although it's a bit hacky.
Otherwise if you want a different design and behavior, you can also just make your own.

Answer 1

Better later than never ... A couple of notes - 1: while this method works, it is not really "ideal". 2: You will have to do this each time you add a new control in order to get the new paths/ids for the object added.

I did test this with a published Desktop EXE and the result was as expected.

When you add a control (ex. ColorPicker) to your scene you can test run your app/game and while it is running, in GoDot in the Scene menu, click Remote. You can view information about what is loaded in your scene including objects, controls, etc..

So I created one in my scene as an example and named it MyColorPicker, drilling down the heirarchy of the MyColorPicker in my scene via Remote, I was able to find the resource paths for each item. In my example, I have hidden the Color Dropper Icon, HSV and RAW Buttons as well as the Preset Button.

 # Scene Script
func _ready():
    #
    # @@15 Color Picker Dropper
    #
    var cpicker1 = get_node("MyColorPicker/@@15")
    cpicker1.hide()
    #
    # @@68 Preset Button
    #
    var cpicker2 = get_node("MyColorPicker/@@68")
    cpicker2.hide()
    #
    # @@20/@@57/@@58 HSV Button
    #
    var cpicker3 = get_node("MyColorPicker/@@20/@@57/@@58")
    cpicker3.hide()
    #
    # @@20/@@57/@@59 RAW Button
    #
    var cpicker4 = get_node("MyColorPicker/@@20/@@57/@@59")
    cpicker4.hide()

You can do the same with other controls on the Color Picker as well as other control types you add to the Scene.

Hope this helps someone at some point!

Answer 2

A better approach to this than @Crypton's method is to use get_child. While the names can change, the position of each node in it's parent is fixed. For example, the Raw Mode check button:

Can be hidden using get_child(4).get_child(4).get_child(1).hide(). You can find the index position you need by running the scene:

Just make sure to count from zero.

Comments

Doesn't work at least in Godot 4 Alpha- there are no children.

Answer 3

Hello, it is possible to change where the colorpicker display/spawn like in my project it spawn on top of my character,i would like to move it somewhere else to be able to colorpick while seeing the character

Comments

You just need to set the rect_position of the ColorPicker to a value to offset it from the spawning position that is relative to it's parent e.g. rect_position = Vector2(-100, -100)