Image with buttons umg

Hi :slight_smile:
Let’s say I have a background image of numbers and I want to add for each number a button so the player can interact with.
How can I “bind” the button to a specific location in the image - the problem start when the window resolution changes or the viewport resized…

Anyone has any smart solution?

Thnk you very much :slight_smile:

You can drag an image into the button, which will give you a button with a background image, you can also drag a text if you want your button to have a text in it. Don’t use an image as your entire menu, make it a flexible menu, by seperating your buttons from the background

Hello Dvir Samuel,

After taking a quick look at your question, my suggestion would be to use an overlay widget. This will allow you to layer widgets together. This would allow you to add both the image and the button to the overlay giving you control over the position and size of both. I would also suggest that if you are going to be reusing this set up a lot that you make it a self contained widget that can be dragged into other widgets via the user created section. I hope that this information helps.

You can find more information on the overlay widget here:

Link: Widget Type Reference for UMG UI Designer in Unreal Engine | Unreal Engine 5.1 Documentation

Make it a great day

Thank you very much :slight_smile:

The post is a little bit old but I was searching for it and discovered that every button has its own image section under Appearance->Style->Normal/Hovered/Pressed. With that method you can select custom images for Normal/Hovered/Pressed and there color. E.g same image every time but a little darker tint for hovered and pressed so the user has some feedback or make two different images e.g a book normaly closed but when you hover over it the book opens. Tip: make the width of the outline 0 so only your image is visible and the corner radius to 0 otherwise you have a edge around your image

5 Likes

Thank you for this!!!