So I have a simple UI the player can get to, and when I give the player two options, I want him/her to be able to move with the keyboard between the two, (so left arrow for example highlights the left box and vice-versa), how do I add key functionality to the widget?
I also want for the Widget to proceed to another part of it after selecting one of the options, so I imagine I’d have to do this in the Actor blueprint I’m getting the widget from?
When you click the button widget inside the WIdget Designer, go to the options panel and scroll down, then select “OnPress”, this adds a ButtonOnPressEvent to the blueprint where you can add for instance a function to your game instance, which includes the code, or you can ofc add it all there in place.
I’ve managed to make it so I can click the buttons with the mouse, how would I go to be able to switch between the two options with the keyboard arrows? (left goes left, when pressing left it turns to the right option, and vice-versa).
You can go to your PlayerCharacterController Blueprint (or where you store your player movement code, maybe on the Character Blueprint), and add the Left and Right Keyboard event node. Just type Left key and Right key into the search box (right click into the blueprint event graph).
Then to trigger the Buy and Sell feature you would add the related functions directly to the Left/Right nodes, and could change the colors of the Buy and Sell buttons, or play an effect for instance. There are many ways to do this.
But i think what you want is, first you interact with the Blueprint, after pressing E. Then you could make a Widget Visible, which contains the Buy and Sell buttons. The Widget would be spawned invisible on EventBeginPlay for the character, and would be part of your Game’s Player Character HUD, where you could arrange the Widget.
How would the logic work with which button is pressed in the Character Blueprint? I can’t “press” left or right, because it should be changing between the two, and I could have more than two buttons for example.
Basically what you’ll want to do is assign each button an (you can make a custom button widget with an index variable, or just use an array), and then have a variable Integer named SelectedButtonIndex or something. Start it at zero (or higher if you want a button preselected). Then when the widget is constructed, tell your PlayerController to set a variable named something like “IsInMenu” to true.
Now, on your player controller, for Left key or right key, if IsInMenu is true, talk back to that menu and tell it to lower or increase the SelectedButtonIndex.
Then add a function on your widget called HighlightSelectedButton. Make it do whatever you want to the selected button index… highlight the button or whatever.
Then make a PressIndexedButton func. Call it when the player presses left/right if you want, or if you want them to have to hit enter/space or something, do a similar thing for the left/right keys. So on the player controller if the player presses space/enter it calls the PressIndexedButton func on the UMG.
There is a focus system with UMG that allows to use the UI without the mouse. You can move focus from one button to another and press them using only keyboard or gamepad. But it’s a little bit strange. First, by default, nobody has the focus. You have to manually specify which button receives the focus (use SetKeyboardFocus node). Second, widget in focus will be indicated by a thin dotted line around it, not really easy to see. There is no style associated with the focused state (or at least I couldn’t find one). But you can detect when your button is receiving focus and change it’s appearance (use HasKeyboardFocus node). After this is done you can navigate your UI without mouse.
