UMG Modular Widgets

Hello Community :smiley:

I was playing around with UMG and i have some issue which made me pull my hair out.
I took different approaches to see if it will work or do what i want it to do.

Approach 1 :

I setup my UI_HUD UMG Widget and put all my UI_Widgets in there and add the UI_HUD to my view port, and made my keyboard/mouse input key_maps work in BP_PLAYER (Pawn Class) blueprint

Result : works perfectly
Issue : When you have a a lot of UI Widgets it becomes messy inside 1 UI_HUD

Approach 2 :

I setup my UI_Framework as a base add my widget as a child and add the UI_Framework to the view port, and made my keyboard/mouse input in BP_PLAYER (Pawn Class) or BP_PLAYER_CONTROLLER blueprint.

Result : Displaying works fine
Issue : I’m unable to remove a widget from the UI_Framework or set the visibility of one of the widget, i always get a No Access Error.

Approach 3 :

For each UI i created a own widget and added each widget to the view port and made the keyboard/mouse input key_maps work in BP_PLAYER (Pawn Class) blueprint, (It won’t work in BP_PLAYER_CONTROLLER)

Result : works perfectly
Issue : The UI’s are not clickable because they are laying on top of each other. (I haven’t figure out how to fix that)

Maybe somebody have a better approach or know what i’m doing wrong.

Edit : Found a solution that worked for me.

I’m not sure if this is the right approach if there are any but it did the job for me, it may or may not be a help for somebody that is trying the same thing.

Modular Widgets :

UI_Framework is the base of your UI and all your other UI Widgets wrap inside it, but you are not limited on how many different UI_Frameworks you can have.

Example :

UI_HUD_Framework : UI_HUD (Health, Exp, Energy), UI_HUD_Details

UI_SHOP_Framework : UI_SHOP, UI_SHOP_Sales

It’s not limited to what you can combine together, it’s more in the mind of Easy Maintainability of UI Components

Create and Add a Widget to your Framework :

Example : I’m adding my widget UI_HUD to my Framework

Add More Widgets to your Framework with out any problem

Some Sizing and Positioning Options. (You can use any option that is linked to the canvas panel option)

Add your Framework to the Viewport :

Every UI Widget has it’s own Widget File, also stacking a widget into a widget into a other widget is not a problem at all. the framework will basicly do all the work for you, Thanks to Epic’s Epic Coding of course :stuck_out_tongue:

Controlling your framework is very easy and maintainable :

Controlling the whole framework or just widgets and/or components inside of it is very easy.

I hope this helped anybody :slight_smile:

Have you thought about using Widget Switcher, not sure if that works in your situation.


Hi Narghile,

Thanks for the suggestion i will see if i can find more information about the widget switcher,

I seen alot of ppl using Flipflop or Branch to make there Widget open and close,

But this works with a condition so if your Widget is already visible it takes 2 key presses to make the function active, and the flipflop is not really that good if you press the keys to fast the flipflop can’t keep up or messes up with function you put after your toggle.

I made this need little Function Blueprint.

This will automatically detect in which state your widget is at the time you press a key or want to do something, the function does all the work for you without branching or toggling. it’s very easy and usable in different situations. (I’m still working on integrating Mouse and Keyboard Input settings)

Here is the Function on use inside your blueprint.