Context Menus

Context menus are those boxes that appear when you right click on something. I wanted to make a context menu for this kind of button, similar to how Battlefield 1 works (the square on the right is what you click to get the context menu to appear):

My attempts at first were very trivial:

1. Make a widget for the menu

2. When IconButton (the square) is clicked, created context menu widget at mouse location

3. When IconButton is clicked again, remove the context menu widget from its parent (the parent being the BigButton widget)

This was a bad solution, as not only could I not exit the context menu by clicking anywhere (you had to click on the IconButton again to exit it), but it wouldn't even be created at the mouse's position! Not to mention the animation still changing when you unhover from the button, etc. So I needed to make a better solution, and I found this forum post, with someone answering it with a Menu Anchor. A Menu Anchor lets you show and hide its contents in different ways. It holds a widget (e.g. my context menu widget), and has different placements (e.g. Right, Above, Centered Above, Above Right, etc.). It also closes automatically when not in focus, which is exactly what I needed, because I could click anywhere, and it would stop the widget be in focus.

The Close function isn't actually needed as that happens when the Menu Anchor is not in focus, which happens when anything except itself is clicked, but I put it there before I knew about that.

The next thing I needed to do was to fix the animation, which I did with a simple checkbox solution, essentially the same as all my other checkbox things. There was a problem though. I needed to play the unhover animation whenever the Menu Anchor is closed, but I only want it to play once. Putting it in Tick with a Branch checking if it's closed or not plays the animation repeatedly, so I need to find another way around it. Thankfully, the Menu Anchor widget has the awesome "On Menu Changed" event, which has a boolean called "Is Open" in it, so I used that in a Branch to check if it was open, and if not, then I would set the required events:

The final result is like so: