How to create Context based UI elements

Hey I’m very new to Blueprints and have been watching a bunch of videos but am having a hard time approaching my concept. I just want to be able to rightclick on the player character (in 3rd person or top down view with the cursor showing) and have a neat little menu of options open exactly at the pointer click location, but only when I rightclick on the character directly. And also be able to click away from the character and have the menu disappear. Hopefully that makes sense and thanks in advance for you help and time :slight_smile:

From your Player Controller create an Event for Right Mouse Button. Create the node Get Hit Result Under Cursor By Channel. This in combination will check which visible actor is under the cursor when you right click.
Drag the blue pin and break the hit result. Drag out the Hit actor from that and Cast to your player character.

From here, you’ll want a succesful cast to create your menu (If it doesnt exist yet) and from Cast failed you can close your menu (If a menu exists).

Create Widget “YourMenuWidget” and add to the viewport. Save that widget as a variable so you can check whether the menu is open already and use the reference to close it later. Drag out the widget node and Add to Viewport.

You now only need to get the position on the viewport. From the Break Hit Result you created at the start, drag out from location to Project World to Screen. In the Player input attach “Self”. Now from the Menu widget drag out to Set position in viewport. Drag the screen position from Project World to Screen into the position of that node.

Removing it is far simpler. From the cast failed pin check if your menu widget variable is valid. If yes, from the menu widget drag into Remove from Parent.

This did not work! I tried it on the TOP DOWN example and its not happening. I created the little menu in a widget. How do I save a Widget blueprint as a variable? and where is the widget node that i am supposed to drag out to viewport? thank you for your explanation, its great, but I’m just a little confused about some of the steps. I dont understand where you got that ‘GET is valid’ node after cast and how does it already have the menu widget blue circle? and I dont understand that ‘SET’ node after create widget node is? Sorry if its a lot to ask, but I literally don’t understand half of whats going on and its really triggering and frustrating and i just feel like giving up lol please help break it down even more please

Aight if you right click on the Return Value output of the Create widget node you’ll get an option to Promote to variable. This will create a widget variable that will show up in your variables window which is by default on bottom left, and automatically connect a Set “YourWidgetVariable” Node.

300364-screenshot-1.png

If you drag that variable from the window to your event graph you’ll get the option for getting a “Get” or a “Set” node.

300365-screenshot-2.png

By default the widget variable is empty, so thats why we have to set it after creating it.

You can right click on the pin of a Get “YourWidgetVariable” Node to convert it to a validate get.

300366-screenshot-3.png

Something wrong in my initial example. So for the top chain the Validate get Menu widget is there to say: If a menu widget does NOT exist already, create one. So we drag from Is not valid. The bottom chain is: If a menu widget does exist, remove it. So there we drag from valid.

Hope that clears some stuff up!
If its not working you might want to debug parts of this just to see exactly Where its not working. I’d recommend putting Print strings at both ends of the Cast node just so you can check whether the hit result does detect your player character. If not, then you may need to change some collision settings on him.

300368-screenshot-5.png

Ok that helped a bit, I tested this out on the TOP DOWN template that comes with UE4 and it worked! But there are two problems. First, when I tried the same thing on my own custom empty level project with player character and controller it didn’t work (something with the collision I cant figure out). And then I imported the mannequin model from the TOP DOWN template (hoping that maybe it’ll fix the collision) but it still didn’t work. Second problem, when I did get it to work in the TOP DOWN template example, there were 3 issues: A) the little widget menu appears on the top left corner of the screen and not on the cursor click location and B) it disappears only when I right click away (does not disappear when left clicking away), and C) after it disappears from the top left, right clicking on the character again does not bring it back. Thank you so much for your effort so far, I really appreciate it. I want to be able to create this custom on my own level and not on the top down example

Ayy no problem. First for getting it to work in your own level: It may not be collision settings. Could it be that your player controller isn’t connected in the level? From the top left go down the window menu and make sure World Settings window is checked. It should reveal a new window with the same name somewhere on your editor. From there, check in under Game Mode if it uses your Player Controller class.

300419-screenshot-7.png

If it isn’t using it, you need to attach it in your Game Mode. If you don’t have a Game Mode blueprint made already, make one and place it in the Game Mode Override and assign your player controller to its player controller class.

300420-screenshot-9.png

Now for the other issues:
(A) Attach the top pin of the Set position in viewport node at the end of the chain where you create the menu widget. What its doing is finding which screen space coordinate your player character aligns with, and tells your menu to be positioned at that spot.

(B) So as I understand if you left and right click away from the player you want the menu to disappear? In that case, you’ll want to create an event for the Left Mouse Button. Copy the logic that you have for the right mouse button to it, but remove the top chain after the cast (That spawns the menu widget) assuming that you don’t want left click to spawn the menu.

(C) I might’ve overlooked something there. So probably the Get menu widget with the valid checks thinks the menu is still valid and that’s why it doesn’t respawn. Should be an easy fix. Set the Menu widget variable again after removing it from screen, but leave the pin empty. This empties out the variable, meaning its no longer valid.

Ok, so I already had the game mode stuff set, but it was still not working in my project. It was working in the TOP DOWN example template, but not in my custom project level. Then, I made sure all my settings were correct again and something weird started happening. Now, in my custom project level, the menu shows up only when I quickly double right click on my character and disappears only when I quickly double right/left click away lol. Its not perfect, but I am really happy that something is finally working :smiley:

Ok, so now, a few things:

*FIXED(1)

(1) Why does it work with single click on the top down template example setup, but needs double click to work on my custom project setup?

FIXED(1) I had to change the mouse capture setting in project settings to: permanently including initial mouse down*************

FIXED(2)

(2) Once the menu opens, I cannot right click on the character again to open it up anew. I have to click away to make it disappear, and click back to make it appear: (like first i opened by right clicking the character leg, but when I right click the head after menu is already open, it doesn’t disappear and open again on the head click location). {{for example, in windows, you can right click on an icon again and again, without having to click away}}.

********FIXED(2)*******made adjustments to the right click menu logic in player controller
CONTINUED BELOW

*FIXED(3)

(3) I already have a button on the top of the little menu that pops up, displaying “jump.” How can I connect this button on the popup menu to call in an animation for the character_blueprint mannequin skeletal mesh to jump, (and have the menu disappear after button is clicked)?

*FIXED(3)
300505-
removed play animation node and the state machine took over

P.S. thanks btw, this is pretty cool and if you have a discord or something where we can audio/video chat that would be awesome! :smiley: