I’m developing a fighting game and I am running into a lot of issues with my character select screen. This is problem number 1!!
I have buttons laid out for each character that change style when I hover over them with the mouse, but not when I change button using the gamepad despite setting Focus on them when hovered.
The buttons are set up in this heirarchry:-
The only thing that is focusable is the button itself. It has some opacity in some states and basically serves as a highlight on hover.
I can see which widget is selected with a gamepad, but it just doesn’t change style. What am I missing?
Do you possibly have it backwards? You say you’re “setting focus when hovered”, you should be “Setting hovered when focused”. That could have been a typo but you could also have it backwards
Also, could you hit the arrow on hovered so we can see more details of what you’re working with? Really we’re just going to need more info to go any further. A video would be the bomb.
Possibly! I’ll admit I’m kind of winging it with the UMG stuff! I’ll get more info to you when I get a moment but essentially all the various states do is go from no alpha to full alpha on an image on the button when hovered. On pressed is just a half transparent grey that darkens the background portrait image.
I feel like I’m barking up the wrong tree though, as I have yet to find a way to make buttons stay pressed once pressed, like a checkbox (which I’ve tried but you can select multiples of those which defeats the point!)
Like other fighting games, I need the button to lock focus onto itself until all players have selected characters, or the current user backs out of their selection.
Do you know of any tutorials that teach this use of UMG?
I searched for a long time and then finally found a video that made sense to me. Now I have mouse, keyboard, and gamepad controller support! Building on Eve’s solution this is how I ended up doing it:
While the buttons do receive keyboard and gamepad focus, they don’t show a hovered/focused state. So you have to manually ask the button each tick if it “Has Any User Focus”. And, if not it still might be hovered, so you have to ask it “Is Hovered”.
Step 1: create a User Interface Widget Blueprint.
Step 2: add a normal Button.
Step 3: set the button tint to shades of gray. There is a totally separate foreground color (Color and Opacity) and separate background color. These won’t matter. The Tint will multiply against these.
Step 4: in the event Graph, Every Tick test to see if the button Has Any User Focus. If so, set the active Background color and Color and Opacity. I put these in variables for easy reuse. If not, set the normal (not selected) Background color and Color and Opacity. Note: I did an extra trick for “Is Hovered” where if true I also set the button widget to gain focus.
