Toggle Visibility of UMG Widget

Development Rendering
, , , , , ,
1

Hello AnswerHub! I’m a beginner with Blueprints in UE4 and am looking for a bit of help with making a BoxTrigger Set the visibility to my Horizontal Box in my UMG Widget Blueprint. I have in my current Blueprint:

My Level Design BluePrint:

923×395 51.6 KB

This works and prints out “Testing” in the top right.

And here is my Horizontal Box that I want to make visible on pressing space:

Can only of you give a detailed explanation of how to set the visibility to be visible?

2

Hope I don’t lose you here, I’ll do the best I can to explain.

  1. Create an Interface, call it something like “Widget_Interface”;
  2. Go to the Graph of your Widget and select “Class Settings” and under Interfaces select “Add” and locate the Interface from step 1;
  3. Go to the Blueprint that has your space bar command and under “Class Settings” under Interfaces select “Add” and locate the Interface from step 1;
  4. In your interface, and click “Add New” and name it something like “HideHud” - this doesn’t need any parameters;
  5. Go into your BP with the space bar event, and in the space bar event, drag off the execution pin and find “HideHud(Message)” (you need to turn off Context Sensitivity to find this);
  6. You need a reference to your Widget (I usually Create all my widgets at Begin Play and store them in variables for uses such as this.) Plug the widget reference into the message call;
  7. Go back to your Widget and in the Designer tab, next to the “Visibility” you see “Bind” (as you showed in the picture above.) Click Bind and select “Create Binding”;
  8. Go into the Graph and rename this binding as you see fit;
  9. Drag backwards off the “Return Value” pin of the Binding made in step 7 and select “Promote to Variable”. Name this whatever you like, I’ll call it “VisibilityVar”;
  10. Go to the main Event Graph of your Widget. Right-click and select “EventHideHud” except this time you want to select the one under “Add Event”;
  11. Drag off the event from the last step and select a branch node;
  12. Drag/drop the “VisibilityVar” into the graph as a Get node. Drag off the “VisibilityVar” pin and type “==” in the search and select the “Equal(Enum)” option. Leave the default as “Visible” and hook the red pin into the branch;
  13. From the “True” pin in the branch drag off and type “Set VisibilityVar” and change it’s value to “Hidden”;
  14. From the “False” pin in the branch drag off and type “Set VisibilityVar” and change it’s value to “Visible”;

Here’s a simple image of the last step, I didn’t create all the interfaces and such:

54751-visvar.png
54751-visvar.png1235×516 47.6 KB

Should be all you need! It’s as about as detailed as I can get without doing a video for you or creating an entire new project and ScreenShooting everything.

Hope this helps! If so, I would appreciate it if you could accept the answer by clicking the check mark located under the arrow keys next to the answer. When done correctly, the answer will highlight green! As much time/effort as I put into the answer, an Upvote would be awesome too, but I won’t push my luck :wink: Any other questions just let me know.

3

Here’s a short video tutorial on interfaces, maybe give you a little more insight on them:

4

You don’t need to do all that. You just need to create a new variable in your character blueprint of the type ESlateVisibility, and then bind to that new variable on your widget’s visibility property.

Then you can manipulate it from your character blueprint with ease.

5

Thank you very much for your answer! This definitely should be accepted. Even if @RJHelms84 highlighted that the desired result is achievable in a faster manner, I think this is a really nice solution pointing out some usage of the Blueprint Interface and might be more scalable in a longer run.

6

@jtsmith I know this is post is answered, but I wanted to piggyback off of your suggestion. I am working on a multicharacter RPG, and am applying what you suggested. How would I use this so it hides the ability widgets for other characters but displays the current characters ability widget?

7

I would really appreciate a more detailed description of how to “bind to that new variable on your widget’s visibility property” if at all possible @RJHelms84