How to recognize UMG button hovered state, having a text or a image over it?

anonymous_user_2f116e5b · June 1, 2015, 9:53am

I want to make a level selection screen as shown in the image, for this I have placed 10 buttons wrapped with ‘uniform grid’. I am placing a text field over the buttons to display level number, further i even want to display stars of each level.

My problem is, if I place a image or a text field over the button, button won’t recognize weather it is hovered by mouse cursor and even a mouse press.

How to achieve this ?

Duncan_Dam · June 1, 2015, 10:10am

Change visibility of thing you don’t want to effect by mouse over to Hit Test Invisible, like text or image or what ever is on top of the button.

anonymous_user_2f116e5b · June 2, 2015, 4:56am

If I change the visibility of overlapping text or a image (when hovered by cursor), this will lead to a bug. Button must include level number.

anonymous_user_776011b61 · June 2, 2015, 5:25am

Hi,

I can get the image to collect mouse click.

anonymous_user_2f116e5b · June 2, 2015, 5:39am

this is really helpful, but how can we get to know if mouse has hovered the image or text?

anonymous_user_776011b61 · June 2, 2015, 5:55am

Running out of luck with text.

You may just have to have 10 different pictures, instead of text over image.

Have you thought of putting your images on top of buttons?

Make button invisible?

anonymous_user_776011b61 · June 2, 2015, 5:59am

All I did was make button see through, add image.

You should be able to call hovered option as well, not very good with hovered.

anonymous_user_776011b61 · June 2, 2015, 6:05am

I have not watched, but will when I get back from shopping.

[Unreal Engine 4 Tutorial - Main Menu with Start / Load Level + Exit Game

Unreal Engine 4 Tutorial - Main Menu with Start / Load Level + Exit Game - YouTube

anonymous_user_2f116e5b · June 2, 2015, 6:08am

Elaborating issue : I have setup UMG button, having three different image one for button’s normal state, one for button’s Hovered state and one for button’s pressed state.

Using this button I want to create a level selection screen. This screen will include multiple buttons representing different levels.

Everthing is fine till now, whenever I points mouse cursor over the button, button changes its image(hovered image). In order to display different levels, I need to have level number over each button, so i added a text field on each button, now when I points mouse cursor over the button, button changes its image(hovered image), but when I take mouse cursor over this text field button image is set back to the button’s normal state image and even if I press mouse left button, button have no effect of the mouse press.

anonymous_user_2f116e5b · June 2, 2015, 6:19am

I really don’t want to create different images for each buttons, as I am planning for around 30+ levels.
Will give a try to have a invisible button.

anonymous_user_776011b61 · June 2, 2015, 6:20am

Ok

I just made up an simple one with mine. Set the button to be an image, made hoveover red and it works fine.

Click works aswell.

I am going shopping.

But when I get back, I will find 3 different pictures, and try to replicate your issue.

anonymous_user_2f116e5b · June 2, 2015, 6:27am

Thanks for the help, have fun while shopping

anonymous_user_2f116e5b · June 2, 2015, 7:32am

Thanks ,
I got this done by having button image as image, then added a text field over the image and then added transparent button over the both. Now I change button image as per transparent button state (isHovered or isPressed).

anonymous_user_776011b61 · June 2, 2015, 7:42am

It is processing now, but is this kinda what you are after?

Video

anonymous_user_776011b61 · June 2, 2015, 7:44am

That would work, but no need as shown above.