UMG Color Picker

I am working on a user interface that allows the user to pick colors, first with a limited palette, and then, if they pick “advanced”, allowing them to pick from the full range. For now, the standard UE4 color picker would be sufficient. Does anyone know how to do this from inside UMG, or alternatively, in the blueprint system in general?

Thanks,

giffen

Came here to ask the same question. Did you manage to solve the issue and if so could you share your solution ?

cheers

I am looking into the same thing. It might be a couple parts. I am thinking Creating a material then Create 3 colors one true blue one true green one true red then create three parameter that control there alphas in a lerp add them together to get your color. In the widget create three sliders one that controls each alpha parameter this should give the blending options needed. If this works you could use this to set up a full range of material variables for game and character customization. This will be my first attempt. I will try to create a color picker like they use in the engine.

Hey guys at Epic maybe you could gives access to the engines color picker as a widget. I could see this being useful for a lot of Designers:))))

Ok I just tested my Theory of using alpha parameters to get my color and it works.
Create a new material
add Three colors
(Hold down 3 and click on the Graph)
Your going to want to set each one up for a
Absolute “True Red” (go to the color picker “lol” and set Red to 1 and blue and green to 0

Do this to make your RGB channel colors these do not need to be parameters
Next create three 1 vector parameters (Hold 1 and click in the graph)

Change each one to a parameter
RedAlpha
BlueAlpha
GreenAlpha

You will want to create lerps to be able to control how much of this color channel is add into the Base Color

When you put the color into the lerp make sure you put it into the b slot
then take the corresponding alpha parameters to the alpha slots in the lerp.

Now add the result from red and blue together, next add that to the green place that into your base color.

Bam how to get the right color you want.
Play around with the alphas to get a good idea of the 0-1 value you will want to use to start with. I like complete white, so a 1 value in all alphas.

this is a good starting point now you can play and see if you can set up a saturation and brightness. Also so many player material controllable variables.

Now that the material is set up we need to set up the ability to control it on the actor.

DON’T CLOSE OUT YOUR MATERIAL WE WILL SE IT TO MAKE SURE WE CALL THE RIGHT PARAMETER NAME!!!

NOW FOR THE ACTOR

Go ahead and open up your actor blue print you are wanting to use and go into your construction script.( I am placing it in here because I want it to control the color each time it is created)

Right click on the graph and type in the search
CREATE DYNAMIC MATERIAL INSTANCE

Select the node that should be left
In the parent selection Pick the material you just created

To keep your blueprint clean go ahead and add a new variable in the variable type selection scroll down
type in : Material Instance Dynamic NEEDS TO BE DYNAMIC
Name the variable how you see fit
Now we need to make sure other blueprints can see this variable when casting to this blue print
click on that Eye to the left of your new variable or you can just check editable
the eye should turn yellow
adding tool tips can be very beneficial when several people are working with the project!!!
Also if this actor is going to have a lot of variables functions so forth it would be could to give it a category since these will be variables you may want to change latter.

Since we are over creating variables lets go ahead and create the variables we need to set our materials parameter variables.

You will need 3 floats and repeat the same process you went threw
make sure it is editable
optional but encouraged
give it a tool tip
and place it into a category

When naming these floats I kept the same names I used in the Material
RedAlpha
BlueAlpha
GreenAlpha

Now that you got all the variables do a quick compile.
Hold down alt and click and drag your material variable onto the graph
yeah automatic set if you hold ctrl and drag it will automatically get
those milliseconds add up lol
Now connect the return value to your material variable. then go ahead and do a ctrl drag and drop of your material in and pull off its pin
and in the search look up SET SCALAR PARAMETER VALUE

TO BE CONT.

This will let us control our material parameters we set up in our material
Ok so hopefully dragging it off of your material variable as set it in the target pin hole if not please connect them now
Now i for the reason I asked you to keep the material screen open.
To make sure we get the parameters name right we are going to copy and paste each parameter into the corresponding set scalar parameter value.
In the value slot grab the float variable you created for each alpha and plug it into the value. if you have only created one you will need to set up one for each colors alpha.

We now have control of our color blending for your material.
Now we just need to set our material on our mesh
grab a set material function
by right clicking in the graph and typing in the search SET MATERIAL

Ctrl drag and drop your mesh variable on the graph and plug it in to the target
now click on your material variable in the graph and hit ctrl+w this will make a copy of the material variable and plug that into the material pin.
If you are using multiple materials make sure you set the correct material index (element index).

To test play with the default float values for your float variables and compile watch your actor change colors!!!

Now I am going to see if I get my widget to set these values. and BAMI will have an up an running widget that lets my player pick his vehicle color.

I will let you all know tomorrow!!!

Dan

I had to move on to another project but as soon as I finish it I will return to this issue so if you came up with something that works well or you made some improvments/simiplifications please let us know here. Anyway thanks for great in depth guide !

I understand I am normally working on three to five challenges at a time. I am Happy to say I have successfully created a custom player color selector. My challenge is now to find a way to save to specific players and not to the all players. If you have figured out any info on how to make custom player save game I would appreciate the help. Tomorrow I will put together a new tutorial that is a lot easier then the one I have posted before. I found you do not need to create a separate alpha channel for each color you can leave it as a 3 vector in the Material and set the sliders to build the color. The Content example UMG map helped me figure this out. Yeah I will put together a good tutorial for this tomorrow.

Cheers Mate
Dan

Hey there Murkymurmur,

Check this out and let me know if this is something you could use!

link text

You could just download and integrate Rama’s Color Picker UMG Widget plug-in:

Is there a 4.21.2 version of this?

try look this

No exactly what I need, but thank you. I am looking for UI element only.