I have seen tons and tons and tons of UMG tutorials on selecting buttons in Menus, but what I want is a visual representation of button textures I have in various states to show that the PARTICULAR GAMEPAD button, such as the triangle, square, circle and X buttons on the PlayStation gamepad, or ABYX on the XBOX console, is being pressed on screen. I have looked nearly everywhere throughout the documentation but I cannot find a solution. They cannot be bound in the Interface or elsewhere that I know of. Does anyone know how to hook these up? Seems like this should be covered in more detail. Thank you in advance.
What you want depends on a couple factors. Can you answer these questions for clarification?
- Are you in a menu or widget screen when you want these icons displayed?
- Specifically, what is the input mode (game only, ui only, game and ui) and does a widget have the user focus at the time the button is pressed?
- Should this happen at the response of a gameplay action, say quick time events or you having to hit the “Punch in the face” button?
- When you say “textures in various states”, what are you referring to? Just the different ABYX buttons or each of these buttons in different states like hovered/pressed/blinking etc?
- Do you want the icons to change depending on the type of gamepad (PS/XBox) that is used?
Hey, wow, thank you for your quick reply! If the character has a weapon or they’re fighting with their fists and kicks, I wanted the button on the screen to “update” to acknowledge the input, and drain “tech points” depending on which button they pressed. Like Square would be a value of “1” Triangle a value of “2” and circle a value of “3”. I already understand how to set up this system, but I am not sure how to do the rest of updating the appearance of the on screen buttons. It’s an action/adventure RPG/third person shooter. And it would help to learn how to switch out the button layout, also (PS/XBox). (Is there a best place I can read/find the right tutorials?) Thank you for your understanding. When I say textures in various states, I meant that there are multiple images of the buttons, one regular and one pressed down, that kind of thing, ready to be switched out. I just lack the experience.
Alright, that makes things clearer. This can be done different ways, but all require a couple of steps, though. The rough outline for one way to do it is:
- Since your punches and shoots are bound to input actions, the first thing is broadcasting the key that was pressed for this input action. Blueprint is a little easier for that, it’s just a matter of defining a custom event dispatcher on the class that handles the input:
OnActionPerformed is the custom event and it takes a key as parameter, broadcasting that key to every object that’s listening. That’s the next part. - Bind to this event in the UMG class that serves as your HUD. Whenever you punch and shoot, this class is notified and receives the key.
- After this, it’s just a matter of matching this key to the image. You can use a map for that, specifically a map from key to slate brush. In C++ it would be
TMap<FKey, FSlateBrush>. Search for the pressed key in the map, if found, grab the image widget that displays the button and pass the slate brush to the image. - If you want to display different icons for different gamepads you might have to use multiple maps, one for each platform.
There’s more to it and several different ways to achieve that. You can implement custom slate styles, at least if you work in C++ (which I’d prefer for that), but I’m not sure about Blueprint. It’s getting late over here though, so I’ll check back tomorrow in case you have more questions.
1 Like
I hope you had a good night’s rest.
This is the Input Action set up for my combo system. I’ve put the string and Event Dispatcher together to the best of my understanding. I’m sorry, I do not know C++ much beyond ‘Hello World’. I think I understand what you’re saying about the slates and grabbing the image. I do know there is plenty of tutorials about slates and the normal and pressed states of buttons.
That part looks good to me, you only need to take care of the widget. Here’s a minimal implementation. The widget contains an image, ButtonImage, which is used to set the button icon.
We use a Key/ButtonStyle map to store the icons. This has the advantage that we can store different icons for different button states in a single struct and fetch the one we need. I named it ButtonStyles in the screenshot below.
We set the default values for all the buttons that we’re interested in. I did it for the XBox A and X buttons below.
After that, it’s just a question of binding to the character’s event and looking for the right icon whenever that event fires. Minimal implementation below. It fetches the button’s “Normal” style. In a real-world scenario there would be additional code to decide which style to actually apply.
2 Likes
Hey, thank you for this! I know it’s been a while, but I appreciate it. <3