Color picker in game [Improved]

[Bubble]

Future people, the new and improved method is in post 11. This new method is from @Joshua2. I was changing the gradient color of a text object which, while effective, was awkward. Joshua’s method is simpler and better.

---

---

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.

[Bubble]

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.

[Silver-Streak]

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.

[Bubble]

@Silver-Streak

use the “Read pixel” extension

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

[anon14980890]

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

[Bubble]

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.

[Bubble]

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

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.

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

[Joshua2]

@Bubble what if you designed a white fading to transparent square and black fading to transparent square gradient and you overlayed them in gdevelop on a white background and then recolored the white to transparent on with the recolor action

[Bubble]

@Joshua2 Hi Joshua and welcome. Do you mean so that there would then be no need for the the (awkward) text box with its gradient changed in events? That’s interesting, I’ll try it. The only disadvantage would be for anyone using a basic image editor such as Piskel where transparencies aren’t supported.

Or did you mean instead of this?

@Bubble

Optional
An image with a black and white gradient set at right angles to the gradient in the text box

[Joshua2]

@Bubble I was thinking it could be done with three png photos designed in a graphic design software (I used Google Drawings) and then overlayed in gdevelop similarly to the second photo i posted. a slider with a rainbow spectrum could change the color of the third gradient in the first photo.

[Bubble]

Thank you very much @Joshua2, you were right! I’m updating this to your idea. Using Joshua’s idea means there’s no longer any need to have a large text box.

Here are the steps, there are three boxes.

1. Have a plain white sprite, this has the lowest z order
2. Then have a sprite with a gradient going from white to transparent.
3. Then have a sprite with a gradient going from black to transparent. This has the highest z order.
   Rotate as shown in the pic or your own way. Light blue background is just to show the gradients clearly.

Here’s the updated events.

Here’s the ReadPixels text (tricky to type)

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

[RMDB]

cool, i needed something like this to customize the menu in game

[RMDB]

Any chance to have this in a dedicated extension, i mean …instead to load all the mandatory ones?

[ZeroX4]

Color Picker

[Bubble]

I just tried that extension and it’s really good although the comment from GD was that because it creates objects it can cause various problems and therefore can’t join the GD world. Also, it isn’t customisable regarding appearance.

Given how many views this topic has had over the years, yes, I will make an extension, but it will be a version where the user doesn’t have to provide their own gradient images.