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.
Like this:
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.
Like this:
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.
