I want my inventory to be blur + transparent

Development Programming & Scripting Blueprint
, , , , ,
1

I have this inventory:

1920×1080 178 KB

and i want blur + transparent inventory like this :

Any tips for do this guys? ( Tutorials / blueprints / plugin / etc… i pay for this if i need)

2

fabianus method looks like the buttons are also transparent. If you only want a transparent background the best ways is to use an image and an overlay layout. In Brush settings of your image select black as fill color and the transparancy you want.
I would be interested in the blur effect as well, but I fear you would need to write a C++ component for this.

3

Hi there. You can achieve the transparency of the inventory by using the alpha channel of the colors you use.

I created a small example:

101459-inventory.jpg
101459-inventory.jpg522×536 22.9 KB

This is a umg widget which roughly matches the design you aim for.
I implemented it using a border as my outermost element in the widget and setting its color and the color of its contents (children) to semi transparent grey / black tones. These colors can be set in the details panel of the border.

Here is the hierachy of the widget:

101460-inventory2.jpg

And here are the colors I used:

101461-inventory3.jpg

4

If you want to know about the UMG widgets in general you can find it here:

5

Yes my method prints the buttons with transperancy too. If this is unwanted set the A channel of the Content Color back to 1 or at least higher than 0.6.

6

hi sorin, for the blur, you can grab a few postprocess blur i made here :FREE custom nodes non kernel blurs - Community Content, Tools and Tutorials - Unreal Engine Forums
but you can use the camera blur too, depending on what kinf of blur you want.
hope it helps

7

Thank you and respect for helping me.
i use your numbers and works just fine… but the template is dehydration right?

8

Thanks and respect for helping me. ok in new in this ue4 … i download the file with blur… and i dont now what i need to do… you have a tutorial or something?
i want blur activated when i press i. Thanks again

9

what you have to do is to create a post process material, and add it to your postprocess when you press I.
you ll find info on the postprocess here :

and on the custom material node here :

just copy/paste my code in the node and add the inputs as specified.

10

what do you mean with template and dehydration? i don’t understand it.