Hi there,
I’m trying to achieve the transparent effect on my menu:
Basically I want the buttons in my menu to mimic this behaviour and become more transparent toward the edges of my scroll box as seen in the first image:
How would I go about this? As you can imagine attaching a transparent image over the top of the menu won’t achieve anything and fading to black will make the whole point redundant as well. I’m thinking masks maybe?
Here is an example of what I want using a black gradient applied over the menu.
The problem in this case is that, as I mentioned before, there is black layered ON TOP OF the buttons instead of transparency masked INTO the buttons.
Worth noting, the menu is housed in a scroll box. If I were to apply this effect to a few select buttons, simply scrolling would break the immersion.
Have you tried wrapping your scroll box with Overlay and creating an alpha gradient (png the size of the menu) hugging the top, and a rotated one hugging the bottom edge? That should work.
Or even overlay the whole scroll box with material gradient. edit: like in this hacky hack:
Just confirm, can I see the exact set up of this?
The only result I can achieve by doing this is exactly what I didn’t want.
Here’s the code for the material (I assume I may have done something wrong here)
Here’s the preview in the designer:
Material overlays well but adds black, not a mask of any sort.
Here’s the runtime visual:
[spoiler]
No good 
The black colour is not what I’m after, I need transparency on the buttons instead of black. Any sources you could think of that may help?
I see, I got confused by the very first image even though you said black is not what you need. My bad. And you’re right, it will have to be coded into the button itself.
In order to use materials with UMG with all their bells and whistles, they need to be set to their own domain:
And I believe this is the transparent button you’re after:
One solution that comes to mind is as follows:
I’d run this function only if the scrollbox captured the mousewheel.
This is fairly easy to achieve if you only want to apply the transparency to the first and last button but seems very complicated if you want the effect to affect the entire Scrollbox.
Can you not tell the button to change it’s alpha near the top and bottom of the scrollbox?
Op is asking for a progressive gradient that affects more than one button (judging by the top image). And how would you define which button is at the arbitrary top/bottom if it’s a scrollbox child? We also do not know how the scrolling is supposed to work? Is it fluid, is it a set amount, is the amount equal to the button’s height? If you use the mouse wheel, you get 32 pixels as default (at my end, this may depend on the system settings, I guess), but if you drag the slider, you can get a pixel perfect value.
There used to be a way to cast a widget to a slot to get it’s relative location in a scrollbox but I honestly can’t reproduce it anymore.
Unfortunately the key functions of the scroll box is both mouse scrolling and dragging, as well as VR hand gestures.
Also, it would be tedious to create individual widgets for each button as I have a widget slate design for the buttons themselves which retrieve the logo and title based on some custom bp code when the menu is created. Another note: There are currently about 70+ buttons…
I’m guessing this probably hasn’t been done before
Here’s an image to better describe what I’m trying to achieve:
I have absolutely no idea how to pull this off, and I’m not even sure what to call this effect.
Is it a transparency mask?
A gradient of alpha blending?
The key thing here is that the fade out effect needs only to apply to the visible top and bottom parameters I have visible. The scroll box extends these visible areas vertically and should I scroll down or up, buttons previously hidden by the fade out will be revealed emerging from the transparency.
Does anyone know of anyone who may know the key to this?
Sorry for basically triple posting I’m desperate at this stage
Bump
Does anyone know if this is possible?
;635940]
Unfortunately the key functions of the scroll box is both mouse scrolling and dragging, as well as VR hand gestures.
[/QUOTE]
I just meant that the function may not be very performant so run it only when you interact with the widget. I did not mean that it would’t work in VR or with touch gestures.
;635940]
Also, it would be tedious to create individual widgets for each button as I have a widget slate design for the buttons themselves which retrieve the logo and title based on some custom bp code when the menu is created. Another note: There are currently about 70+ buttons…
[/QUOTE]
You could just stick all the styles in a DataTable/array and let the button fetch the style it needs. I admit that this may be a bad approach if every button in your game is unique but looking at that menu, it seems that they’re all identical. Just a thought.
I had the overly convoluted solution I posted kind of working (each button handling its own gradient transparency). The range mapping function turned out to be the pain in the neck as you need to find out which buttons are currently visible in the scrollbox and how much of the button is visible and then apply the gradient settings. Perhaps you could cut corners and apply the effect to the first and the last visible button only for now (to see if the effect is satisfactory), and never show half-a-button in the menu by implementing a scroll-snap-to-next-button feature. That would remove a bunch of variables from the equation as you only need to worry about 2 buttons at a time and can ignore their relative position.
More on topic, I can tell you what will not work so you do not need to spend time investigating. Custom widgets get ForegroundColor property which can be inherited by their children. This property will simply override children’s colour and transparency. I was hoping to create a Bordered Scrollbox with transparent gradient and have the buttons inherit parent’s gradient. This *unfortunately *works as intended and the only thing that gets inherited is the foreground colour and not the parent’s material. I even tried retrieving it with a function but could not figure it out:
I’d be surprised if the effect you’re looking for could be achieved in blueprints only. You may need to find a C++ wizz happy to implement a custom solution directly in slate –> Buttons inheriting material from the parent container.
Last year I tried to implement a custom solution for something similar to the wires the editor is using and gave up quickly, the slate side of things made my head spin and I’m no stranger to coding.
Anyway, I’d love to see a properly working solution to this. Heck, maybe there’s a simple trick I can’t think of.
Not sure if it works, but you can try using umg’s retainer box with semi-tranparent material.
It does:
Clever.
Sweet Jesus.
I owe you my life
Everynone, I have PM’d you regarding your set up as seen above.
For anyone ever coming here wondering how to pull this off here’s what I ended up doing with Everynone & scha’s help:
• A retainer box is parented to the UMG buttons/images/etc.
• A new material is created, (the name of the material is irrelevant but in my case it is called “List_Overlay_Material”).
• This material is then plugged into the “Effect Material” of the Retainer Box:
• Double click the material and set it up as the following:
*Note a few things for the Material set-up:
The “Tex” is a 2D Texture Parameter. It does not matter what the texture is as pointed out by Everynone. Simply drag literally any >texture< from your content browser into this graph and right click it to convert it into a parameter.
Rename this parameter to whatever you like but remember what you call it, (in my case I called it “Tex”).
The material MUST be in the User Interface material domain and blend mode set to “Translucent”.
[spoiler]
[/spoiler]
Note the set up for the gradient in the material graph. This set up is for creating an linear vertical gradient which fades into white in the center from black on the top and bottom Your set up does not need to be this way. You can have just a regular vertical or horizontal gradient (left is white, right is black) and it will work the same.
The “texture coordinates” and plugging the “Tex” (In my case) into the final colour are all very important. Make sure your gradient set up is plugged into the opacity.*
As stated, the 2D TextParam is completely irrelevant.
[spoiler]
• Your material is ready. Go back to your design window and in your retainer box, set the “Texture Parameter” to whatever you named your ‘2D Texture Paramter’ inside the material you created, (context sensual ;))
• Compile and save everything.
You’re done!
Depending on your Material, it should look something like this at runtime:
Hi, you could do rounded borders with this kit on the unreal marketplace:
It should solve what you would like to do, I noticed there’s also a playable demo!
This is sooooo close to being perfect, but I’m hitting a snag here in 2019: the top and bottom fadeout correctly, but the middle area is black. The buttons inside the Retainer Box are fine and not tinted, but their black background is impossible to eliminate. Is this just an inherent part of this technique?
*This is just one button, just wanted to show what the effect was
