I’m trying to make a UMG widget with rounded corners (as opposed to the default straight rectangular shape). That is, is a square / rectangle with 4 rounded corners and some other UMG elements inside it. But I want the rounded corners of the “container” widget to also mask any child widgets inside it.
My first approach was making the container / base element a border and applying a texture with rounded corners to it.
The issue with this is that if I then add another element as a child of the border (a rectangular image for instance), the sharp corners of this image cover the rounded corners of the parent border, since the image is on top of the border.
In the image above, the red rectangle would be an image element as a child of the border element. Since the image is the same width as the border, its straight corners extend over the rounded corners in the parent widget.
As far as I know there is no mask component within UMG, so another approach I tried was to instead apply a rounded rect texture as a mask in the widget rendering material as a whole. This way, when Unreal renders the widget (in world space inside the level), it masks out the corners of the widget as a whole.
This works for the general case but my end goal is to render the widget into a stereo layer, so that it looks good in terms of antialiasing in GearVR. This introduces another issue: to display a widget in a stereo layer, I first need to render it to a renderTarget2D and then use the resulting texture in the stereo layer.
It appears however, that when I render the widget to a target (via FWidgetRenderer), it does not take the material masking into consideration. So the result, as far as the render target, is once again a rectangle with straight corners.
I would appreciate any ideas to tackle this problem.
Bit of a late reply…
But since this is one of the first hits in google concerning rounded UMG elements in Unreal, it might help others.
To mask multiple UMG elements you can use a retainer box, which uses an “effectMaterial” to apply some postprocessing to your widget. Use a UI material with translucency and use a mask texture or some math to create your rounded corners.
Anyway, not going to type an entire tutorial, but google RetainerBox Unreal and you should be able to work it out.
Someone else also mentioned the retainer box in a similar cuestion I posted. I currently do not have time to test this but do you know if this approach would work with stereo layers? Because with my approach the stereo layer render would still show the widget unmasked, even when the widget itself is masked.
If retainer box does work in this regard this should be the right answer.
Hi,
maybe I’m a little late but I’ve found this on the marketplace that allows us to create procedurally rounder borders and gradiented backgrounds really speeding up the UI develop process!
I have a question about your masking material. Are you only using UV values as input (TexCoord) or is there a way to know the distance from the edges in pixels? With UVs only, I wouldn’t know how to prevent the rounded edges from scaling with the size of the image (which I don’t want…).
edit: actually, nevermind. I found the GetUserInterfaceUV node with its PixelSize.
Again “a bit late” and does only work in some cases (probably not in the OP case) but another solution would probably be using another rounded border to hide some of the content, so it gives the appearence that is rounded, without being rounded (here in the case of an image, we would put a border over the image). The caveat is it -only- works to make visual consistence, but still the image doesn’t have to go to the masked zone of the background image.
Here a conceptual graphic (havn’t applied it but I think it shoud work). 1 shows the image over the rounded background, 2 shows the border over the image, with the border colored for clarifying porposes. 3 would be the final effect.
Of course the border has to be thick enough, because if not you’d see the corners and the “faked” effect would be ruined.
You can just use Border and go [Appearance]→[Brush]→[Draw as]→[Rounded Box].
Set [Rounding Type] to [Fixed Radius] and you can adjust the scale of roundness from [Corner Radii].
That is an old way of doing it but as I remember it the corners stretch when scaling, so you wouldn’t be able to set a 10px rounded corner regardless of scaling.
