I have 4 regions in the my meters, YELLOW, BLUE, RED and GREEN. These 4 regions are of dynamic width and they can change positions at different points in the game.
I was wondering if there is a way to blend between colors of these 4 regions smoothly? Sort of like a linear color interpolation that would make it look less blocky as it is now.
I am not very strong on the rendering side of things, so please bare with my follow up :P.
Yeah. Pretty much. But I am not really sure how to get this to happen in the widget blueprint. Right now each of those 4 regions are images with a color brush associated with them.
Each of the regions right now are images with just a color brush in the widget blueprint. So I am not sure where the linear gradient fill function will go in.
You could use a linear gradient brush fill instead of a single color for each of the four regions. If there is no function then you most likely need to create a custom control in C++ that gives you this functionality.
Generally, you can add some opacity to every region on sides with material instructions, but this requires regions to be bigger than they are, to hide background.
Well, I think simpler way is to use additional small gradient images for every color, place them between color regions and move accordingly.
Or, simpler way is to use some stylized divisors between color regions.
I am not sure that would work or I don’t understand it completely. Won’t this mean that the entire region just gets a single lerped color? Or are you saying i should divide up the entire region into minute rectangles and assign them colors that comes out of the lerp?
Perhaps you can adapt the following approach to your needs:
I have divided the main Horizontal Box into 4 segments, each is a HB itself with Fill Size set to 0.25. So we have 4 segments in total adding up to 1 in size. You can use these settings to control the size of each segment. The last element “G” is not wrapped in anything but you can, of course, to make things clearer:
Each segment is made of a HB and two images. The bigger one is just flat colour, the smaller one is ramp. The ramp can be done in material for super duper flexibility but I just used a simple 64px image for this.
Controlling SizeFill of the segment HB alongside SizeFills of the 2 images should provide enough flexibility for most cases:
As you can see in the 3rd bar, when the values are low for Y and R, the transition is way too sharp. But I did not adjust the ramp size at all. I just tweaked the size of the main 4 segments. With a bit of math, trial and error, and some fine tuning, this may work well enough, though.
