x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

Office Holiday

Epic Games' offices will be on holiday from June 22nd to July 7th. During this period support will be limited. Our offices will reopen on Monday, July 8th. 

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

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 ? alt text

Product Version: UE 4.7
Tags:
umg-button.png (206.2 kB)
more ▼

asked Jun 01 '15 at 09:53 AM in Blueprint Scripting

avatar image

DevilEye
108 16 24 28

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

3 answers: sort voted first

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.

more ▼

answered Jun 01 '15 at 10:10 AM

avatar image

Duncan Dam
3.1k 121 50 164

avatar image DevilEye Jun 02 '15 at 04:56 AM

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.

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

Hi,

I can get the image to collect mouse click.

alt text

Narg

capture.jpg (52.2 kB)
more ▼

answered Jun 02 '15 at 05:25 AM

avatar image

Narghile
1.7k 74 38 110

avatar image DevilEye Jun 02 '15 at 05:39 AM

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

avatar image Narghile Jun 02 '15 at 05:55 AM

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?

Narg

avatar image DevilEye Jun 02 '15 at 06:19 AM

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.

avatar image Narghile Jun 02 '15 at 05:59 AM

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

alt text

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

Narg

capture.jpg (26.9 kB)
avatar image Narghile Jun 02 '15 at 06:05 AM

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

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

Narg

avatar image DevilEye Jun 02 '15 at 06:08 AM

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.alt text Using this button I want to create a level selection screen. This screen will include multiple buttons representing different levels.alt text 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.

buttons.jpg (9.6 kB)
avatar image Narghile Jun 02 '15 at 06:20 AM

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.

Narg

avatar image DevilEye Jun 02 '15 at 06:27 AM

Thanks for the help, have fun while shopping :)

avatar image Narghile Jun 02 '15 at 07:42 AM

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

YouTube Video

Narg

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

Thanks Narghile, 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).

more ▼

answered Jun 02 '15 at 07:32 AM

avatar image

DevilEye
108 16 24 28

avatar image Narghile Jun 02 '15 at 07:44 AM

That would work, but no need as shown above.

Narg

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question