I need help creating a custom widget

[SenseiHaketon]

Hey guys,

I want to recreate the minimap from The Division 2:

For this I have to make a custom version of the BackgroundBlur widget, because this widget can only represent a rectangle.
I did some digging in the source code and looked at how the Background Blur widget was done, but I don’t really get all the logic behind it.
Do you know if it is even possible to adjust this widget, so it can represent a circle? I tried using the Retainer Box with a mask, but then the Post Processing for the blur didn’t work anymore.
And if its possible, can I get some help on this?

Thanks!

[Aeries]

I’m looking for an answer to this as well.

[NilsonLima]

All elements are in a square, but you mask with a circle and outside the circle gives 0 to opacity, so it will show the background!

[SenseiHaketon]

@NilsonLima

All elements are in a square, but you mask with a circle and outside the circle gives 0 to opacity, so it will show the background!

Sure, but how am I gonna do this?

[NilsonLima]

I will create a small project and link here for you tomorrow.

[SenseiHaketon]

@NilsonLima

I will create a small project and link here for you tomorrow.

Awesome thanks!!

[NilsonLima]

Hmm now I saw what you meant… I think there is a way to not use the background blur widget and instead use two layers: one to blur the background and another to put the compass on top (so not blurred). Let me see if I get this to work, otherwise I will check the code for the widget and see if we can create another one but for a circular shape instead of square.

[NilsonLima]

There is no way of masking the Background Blur widget. One of the issues on even trying to make something to substitute it is that the material domain UI does not allow you to access the screen info (pixels data) since the renderer is already done at that step and it only needs to add the slate on top of the frame.

Which are the possibilities from here?

1. dig into the engine source and create a version of the widget that accepts a mask like a sphere to cut the shape you want with a certain radius
2. create a post process material with gaussian blur node (custom node with HLSL) and apply the blur at the screen coordinates occupied by your widget. The position must be taken from the widget info.

Besides those 2 above I can’t think of anything else, since all attempts failed.

[SenseiHaketon]

@NilsonLima

There is no way of masking the Background Blur widget. One of the issues on even trying to make something to substitute it is that the material domain UI does not allow you to access the screen info (pixels data) since the renderer is already done at that step and it only needs to add the slate on top of the frame.

Which are the possibilities from here?

1. dig into the engine source and create a version of the widget that accepts a mask like a sphere to cut the shape you want with a certain radius
2. create a post process material with gaussian blur node (custom node with HLSL) and apply the blur at the screen coordinates occupied by your widget. The position must be taken from the widget info.

Besides those 2 above I can’t think of anything else, since all attempts failed.

Thank you so much for your effort! I will try out these things and let you all know what the results are

[NilsonLima]

By the way I have just found this video from Epic which was from the time the feature was release and I have pinned the exactly time someone just asked what you want (notice its been like 2 years now). The Epic’s staff mention on the desire to add it, but I can’t see how that goes up to now: Font Features: UI Font Outlines & UMG Blur Component | Feature Highlight | Unreal Engine - YouTube

Let us know how did it ended up!