+2 votes

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?

in Engine by (40 points)

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.

3 Answers

+1 vote

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.

Color Picker with Hidden Items

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!

by (22 points)
+1 vote

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:
Raw Mode 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:
The Remote Scene Tree

Just make sure to count from zero.

by (64 points)

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

0 votes

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

by (16 points)

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)

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webmaster@godotengine.org with your username.