Download

Newb Question regarding UMG - How to check visibility of Secondary Menu

Hi Everyone, I am trying to work on a UI for an app.

In the UMG I have created a widget - I have set it up so if you press button 1 it plays an animation that opens up menu 2, if I click on the city button it opens up menu 3. now I can get Menu 3 to close to 2 fine, but my question is Button 1 serves as a close menu so I want to set my blueprint up to check if menu 3 is visible or not, so it fires (or not) the animation to close menu 3 before closing menu 2. I hope I’ve explained my self ok, I’ve included a screenshot of the blueprint widget.

I have heard about branches but I can’t seem to get them to work, I must be missing some fundamental bits, any help would be very much appreciated!

36325deaf121adc73c7844eae50a48ed85008575.jpeg

73b8412e8b2e51b252e8b04c21c81d01f75f0a17.png

OK got a bit further however I am unsure if I am doing this correctly, I can get the third menu to fire it’s animation and then a second later the secondary menu closes up and reverts back to a small icon, this is perfect! however I have tried a few combinations and have found If I activate the city menu (03) and then close all menus the first time round, then open it all up again and try to just close menu 1 & 2, it plays the animation of menu 03 closing again before closing the other so I must not have the true / false set correctly? What can I be missing? screenshot below

2edbec9ac3a626f8e9c02cb826edfcb1882a4fde.jpeg

Am I doing this right? How am i telling Unreal to find out if the first third menu is visible or not and depending if it’s one or the other it plays one of the above sequences? I know it’s to do with a boolean variable, I can’t wrap my head around how I tell unreal what the variable is, I am sooo not getting it!

Thinktank, take a look at the FlipFlop node, instead of branch. What it does is hold 2 states and alternates this state each time its activated so you could assign the outputs to open and close a a specific menu or run an animation. Here is the documentation. https://docs.unrealengine.com/latest/INT/Engine/Blueprints/UserGuide/FlowControl/#flipflop

You can assign your opening and close animations to each state on the FlipFlop node.

Something similar to this, not fleshed out for 3 menus but hopefully you get the idea.

e4c368d65637bc4937148e89f65cc339dcb0b9e7.png

Thanks Drifyt! I appreciate your time to respond. I am still having a nightmare with what I thought would be a simple process but I think I maybe biting off more than I can chew! I am getting the desired affect sometimes, I think it has something to do with the flipflop, since it will do 1, then 0, then 1 etc…How can I tell unreal that I want it to do “X” instead of “Y” if X menu is visible. Right now I click a small menu button (1 Menu) that animates into a larger drop down menu (Menu 2). If I click on a button in Menu 2 it opens up menu 3. so now If I want to click Menu 1 it will automatically close menu 3 before closing menu 2 and then into menu 1.

I set this up, but it’s not working, any pointers?

menu example 001.jpg

Can anyone help me? I Can get each of the individual menus to open / close fine but how do i get it to close menu 3 before closing menu 2 to menu 1?

I’m Still not getting it! :frowning: Can’t get my secondary menus to close before the main one closes if I click the main menu button… Anyone got an answer for a thicko?!

just look at your BP^^, you just need to get thing done in the right order !

from the event trigger main menu click for now you are just

  1. flipflop to open/close mainmenu first
  2. than if closing main edit: you first close mainmenu and than you branch to the closing menu 3

make thing in the right order, one solution could be:

  1. ok flipflop close/open main menu
  2. if closing mainmenu , first check for the state of sub menu 2, if closed ok, close mainmenu else close submenu 2 first!
  3. in closing sub menu 2 the same apply, first check if there is a subsubmenu3 open, close it first if required, and than close the submenu2
  4. and than finally close the mainmenu

and that only for the action flow… because if you only have a few menu you can manage thing that way, but if you have at least 10 submenu for each level of sub menu that won’t be good to do it “by hand” for the 100 menus.

Thanks Sylvain_l the problem I am having is I don’t understand how to check the state of menu’s, i know its because of boolean but still trying to wrap my head round it all…

if you are using flipflop, because the only interaction is a toggle, that’s the flipflop node that could/should become your state variable (use the is A boolean pin of the flipflop node to know the state - what you already done)
it works fine for small BP (if you are not clear, use a comment to remember wich flipflop is for which state variable)
that also mean ONLY ONE FLIPFLOP PER MENU STATE, that’s the trick :slight_smile:

if you need to access the state outside the BP class, or have some more complex interaction than a simple toggle, you’ll have to use a variable with set node for each branch (a flipflop won’t work fine with the concept of force to “true state”, or other tricky thing usefull with state variable; so don’t use flipflop for that!)

When I use flipflop for the main menu show / hide it doesn’t work properly, occasionally it’l repeat the same action twice instead of switching to the other choice. Branch seems to be stable for that task. also getting my secondary menu to close before the primary isn’t working the way I wanted! i’m being very thick today, must be the heat! any chance you could show me in a screen shot the way you would set this out? I would be eternally grateful as I have spent hours trying to fix! thanks,

using just a flipflop won’t prevent double fire if someone double click on the menu instead of just a single click.

that’s why in more “pro” solution you go with a full menu manager, using state variables with full detailed state (closed, opening, opened, closing) and you check always for the state before doing anything throwing away unintended event input if necessary. using just flipflop allow to interact with the element at any time (while playing anim, wich can result in very buggy behaviour)

a very basic example (with skeletal anim on simple button) try double click, you’ll see that you’ll have buggy results. but if you just go for a single click the basic behaviour should be what you are looking for (at least as I understand^^)

https://mega.nz/#!VdkXWSLZ!hepMEBTX3tqrTPWfvnQnAZk9z_OWIFVLkR9J_PVL8Ho

Thank you sylvain! I have made much more progress now!!! it does what I want however I still get some odd “combinations” being played out when I click on certain buttons, it’ll work the first time but not second, or play something odd third time etc… I have attached what i currently have. I believe the problems still lay with the flipflop’s,I’ve tried to make it look ordered and easy to follow! I’m curious to learn more about the “full menu manager, using state variables with full detailed state” as you mentioned, is there somthing I can read up on about this or do you have an example of what you mean? I appreciate the invaluable information you are dispensing! :slight_smile:

a91fccb304504df8dda74f74de7335af3ef0e928.jpeg

fault’s mine sorry -_-’
(my instinct told me something was wrong with my small piece of BP, but my fast few click test was looking ok. Easier to see it in your BP.)

here comes a new version with the right branching on the sub flipflop if we don’t go through the flipflop we don’t update the state of the submenu; which of course lead to odd behaviour

https://mega.nz/#!dR923Dya!XfOqjxa9cEfteolg6fakdZcO19cwaG7r9MKy9PtkrlA

and the “full manager” (as a self-educated in programming, I use my “personnal concept scheme”), is just about events, data and state management. just go to the learning tab, most of the example use one or more. (of course most don’t use them for an umg menu, but the concept are there)

A lot of stuff is already built-in in ue4. For example, basically, in your umg animation you could just add an event track, and at the end of the animation add a key, change it’s propriety to any custom name (say “anim_menu_city_end”) and add a custom event listener for anim_menu_city_end in your BP graph. That way you go away with the trick of delay used in the BP to wait for the anim to finish.

Ah ok that’s interesting! It almost works now! i still get on occasion the main menu will close but the secondary menu will still be open, then when i re-open the main menu and close it again it will close it all correctly, this happens every other go…

Another question if you don’t mind is once I have set up all the other “secondary” menus, how will this work when for instance I have the “city secondary menu” out and I click on another secondary menu, I would want it to close first before opening up the next, how will I manage 10 different secondary menus?

50fe65af155ab40caf1c1243f3de650b0d31fb8e.jpeg

lol going on with flipflop, should be epic (theorically it’s possible when closing you just have to replace the one branch testing for the one child by ten for the ten children, and the same sort of things for the switch of a submenu to another)
already said using flipflop for complex task won’t be the easier.

or go for some alternative solution. It’s up to you.
use events dispatching or just use a matrix with ref for all your widgets and their relative data, like the anim, and even keep a ref to the open menus. (or just create a macro or function to get the open one using the is visible function)
you can have all your UI element in one big widget, with one graph that manage everything or split everything into small widget indepedently added to viewport or a mix of both (like a heirarchy; the menu widget containing the sub one in the umg widget, or at least by ref).

I’ve taken sometime off trying to work this one out, I have spent this morning trying to fix it but I’m stuck there’s just too many things going on for my brain to understand lol… is there a more elegant approach to this? like I mentioned if I do end up with several buttons each one having it’s own sub menu I would always want the sub menu to close before the main menu, and like wise if I clicked on a button of one sub menu to another sub-menu button I would want that sub menu to go first…There are a lot of “is this visible” if so do this, if not do this, etc…

sylvain Would you be able to help me with a different possible solution? I don’t think flipflop is going to work with so many buttons, I mean i’m sure it will work, but it’s just going to be a huge mess! you were talking about an alternative solution, could you go into detail for just one part and hopefully I will catch on and be able to expand on that. please :slight_smile:

Well if you don’t like to take care in what state the things are. I think I have a solution.

For the Logical stuff:

As far as I’m aware your menu have static content and positions, and you can have at max only one menu open for each menu/submenu. And you have two kind of menu item: those that do menu stuff (opening, closing menu/submenu) and the rest which change the content of the view.
if your menus are fixed (size & content - theorically even if they aren’t-) you shouldn’t have to care much about anything that your two slots (menu and submenu).

for the menu stuff, we don’t really care of the menu item that only act on view content. (Except if they also change the menu state ? for now, I assume they are not)

all the rest (animations sequences) is just an implicit consequence of you filling, emptying or switching the content of those two slots.

oops, filling, emptying, switching; to many functions !
let’s reduce that to just switching ! You just need to create two… no. Just one, using two instances of it, additionnal dummy menu-widgets (one for menu and one for submenu; dummy menu are those which are perfect: no content and instant animations ! those one being those in the slot when you start the app).

Finally just a small rule, if you need to switch the menu slot, you first ensure switching submenu slot with the submenu dummy first (even if it’s already the dummy there we don’t care, I mean cause dummy animation are instant, so instant closing+instant opening it’s still instant).

Technically all you have to do is just ensure a simple interface for your menus (opening + closing, that take care of your anims). and than using in your menu item the magical switching function (with in argument the menu to put in slot and the target slot[menu or submenu]). And of course, to avoid some glitch, you just enforce your switching function to “run once” (a simple bool, to prevent it for running while it’s already switching menus; to avoid glitchy anims if a user clic everywhere)

Sylvain, thank you very much for your response! amazingly i finally got how to do it! I don’t know if this is a “dirty” way of doing it but it defiantly works! it’s taken me a while to understand the whole is visible node…I know fairly obvious now :-S Altho if I want to to click another secondary button i will need to hide this button first which will mean I will have 9 sets for every button! mmm probably not the best way…

Menu Fixed.jpg