Showing a widget when clicking a button widget

Hello,

I am having a hard time understanding widgets. My team tasked me to look at UI for our little game we are making. They gave me a task where I have to hide 3 button widgets when pressing another button widget. These button widgets are all a part of one widget called “TestWidget”. The TestWidget is added to the viewport when launching the game. You can see one button in the corner and three buttons next to it. The button in the corner is supposed to hide these three buttons and show them when pressing it again. I am trying to figure out how to do this through blueprints. The corner button widget doesn’t have any logic in itself, but it has a button component. The same goes for the three others. Is there a way how I could make the corner button communicate with the TestWidget to hide and show the three other button widgets according to the input?

If I understood my assignment correctly, I should implement all logic in the TestWidget event graph. That to me, sounds quite tricky, if not impossible. Am I required to put logic into the button component inside the button widget to hide/show other widgets (for instance calling for a custom event inside TestWidget)?

I appreciate all the help, cheers!

To clarify: we have 2 separate widgets:

  • 1st has 3 buttons and is added to the viewport
  • 2nd is a corner button toggling the visibility of the 1st

How does the second, corner button end up on the screen?

Let me rephrase:

We have a TestWidget, which is added to viewport.

The corner button is a component of Test Widget. So are the other three buttons.
problem

Pressing the corner button is supposed to hide the other three.

1 Like

Sounds clear. Try this in the Test Widget:

I assumed the corner widget has a button inside. Can be done without a button, too.


In case this bit is unclear:

1 Like

It did the job perfectly!

1 Like

I am now trying to hide the buttons by interacting with anything else but the button. Much like what a lot of mobile games have, for example by having a “Close” button, but instead of pressing that, pressing just anywhere on the screen would hide the pop-up. How could I go about that?

Try this:


Also, if this is supposed to be a pop-up (you could have lead with that, ha), I’d immediately gravitate towards a Menu Anchor:

image

But that’s optional, of course. Depends on what other functionality will be needed later on.

It doesn’t seem to work for me. When I click anywhere else on the screen, the three (now visible) button widgets persist. And I only mentioned pop-ups as reference.

For this the root will need to be set to Focusable:

image

And you may need to give this widget focus to start with:

Now clicking on anything else should make those buttons go away.


There are more ways to achieve that but without knowing the ultimate end goal, it’s somewhat hard to advise. I’d still use the Menu Anchor as it stands. We’ll see what else is needed.

1 Like

This worked, thanks a bunch!

1 Like