Color picker in game

Hi, is there a way to have a color picker in a game? GDevelop has one for changing text, particles etc as shown below but is there a way to have one actually in a game? I’ve looked in the extensions and shape painter but can’t find anything.

I want to be able to click on an object in my game and a color picker pops up. I then select a color and the object changes to that color. I don’t want a limited palette of colors, I need the ability to pick any color.

image

Well, had a think about it. Maybe there’s javascript ways of doing it but that’s not within my abilities. This is my rough first version.

ColorPicker

2 Likes

I think the ways I’ve seen folks do it in the past is to use the “Read pixel” extension to get the color under the mouse cursor, and just have a color wheel/RGB bar like your image above, and use that to get teh selected color RGB values.

1 Like

Yes, that’s what I did, but I did it twice so that I could choose the hue and then the saturation and brightess. Using this color picker help image as a guide to how it works, I made it so I could dynamically change the color of the gradient to whatever had been chosen in the color bar. So the dynamic color changing part is equivalent to the second pic below where I have the gradient from white to the selected hue.


Image from: Create an HTML Color picker using JavaScript - DEV Community

3 Likes

Nice! Great solution. Maybe you should consider making it an extension for others to reuse…

Thank you very much BWPanda. I did think about its potential as an extension. And I would have just posted a screenshot of the events as it’s very simple, just two events in its current rough state.

But the thing is, the way it works doesn’t please me which is why I didn’t show the events. As far as I can see, GD doesn’t allow for changing a gradient on a sprite. The only gradient effect is for a text object. So I have a very very large font sized one of these ■ as a text object and that’s what I’m dynamically changing the gradient on.

I’ll be improving the usability of it and possibly change it to a color wheel with triangle brightness/value in the middle instead. And if anyone has info about changing gradients on sprites, please please let me know even if it’s embarrassing for me that I couldn’t find it haha.

I was asked in a private message if I would share the events to my color picker. So here it is for everyone.

The set up:

  • Rainbow image with lots of colors
  • Text box set to a huge font size, for example, 500 and with this or some other text shape as its content (some text shapes work better than others and the orientation angle can give better/worse results) ■
  • Plain white image that will be tinted
  • Read pixels extension by Bouh :black_cat:

Optional
An image with a black and white gradient set at right angles to the gradient in the text box. See the blue gradient pic above for relevance. It would go underneath the ShadeBar text box. My gif example from months ago uses this, but I don’t use it anymore. This new gif shows it with just a one direction linear gradient from the text box only.


ColorPickerExample


Here is the Read pixels code including semi colons to put it into rgb format to make it readable by the tint action

ToString(ReadPixels::ReadPixelRed(CursorX(), CursorY())) + “;” +
ToString(ReadPixels::ReadPixelGreen(CursorX(), CursorY())) + “;” +
ToString(ReadPixels::ReadPixelBlue(CursorX(), CursorY()))


And here are the events

4 Likes