Buttons can only be rectangular?

[EnragedRavioli (Bea)]

I’m trying to create a nice looking sorta… futuristic(?) UI through a widget blueprint in Unreal Engine, but it seems as if I can not change the shape of a button’s hitbox?

Here’s a screenshot of a button that I added an image to and its hitbox, in green.

After doing some research I’ve come across a couple of people mentioning that it is not possible to edit the button’s rectangular shape to fit your image’s needs using UMG, and that to do so you would probably need to purchase a plugin from the marketplace, but it seems like such a simple and necessary feature that I decided to ask around myself about any workarounds or solutions…?

Thanks in advance!

[tomriddle12345]

Maybe using sprites with custom hit shape? instead of UI

[Supremative]

You could create a custom button with a User Widget and check its alpha.

Follow these steps:

1. Create User Widget (WBP_CustomShapeButton) and add Image:
   

   

2. Add variables and Event Dispatchers like here:
   

   
   
   ButtonImage - Texture2D
   Normal, Hovered, Pressed - SlateBrush (Instance Editable)
   ButtonRenderTarget - CanvasRenderTarget2D
   IsMouseOver - Bool

3. Create Material that you draw to Render Target later:
   

   

4. Add Pre-Construct Event to Event Graph.
   

   
   
   
   

5. In the WBP_CustomShapeButton, create a Macro that will check alpha:
   

   

6. Override mouse functions OnMouseButtonDown, OnMouseButtonUp, OnMouseMove:
   

   
   
   
   
   
   
   

7. Override OnMouseLeave event:
   

   

Your custom shape button is completed.
Then apply it:

8. Add the button to your desired widget and fill the style:
   
   

Events:

Download Example Project (UE5)

My Products

[EnragedRavioli (Bea)]

What a fantastic workaround Supremative, thanks for the in-depth explanation!

[1FoNo1]

Hi! Thank you for posting this! But I have a runtime error says :
Blueprint Runtime Error: “Accessed None trying to read property ButtonRenderTarget”. Node: Read Render Target Pixel Graph: SwitchByAlpha Function: On Mouse Move Blueprint: RightClickBodyTypeButton

[dudebat923]

This is fantastic! The only issue is that there is still ultimately a square bounding box around it, and if the bounding boxes of two buttons overlap, one of the buttons won’t work (in other words, you can’t click “through” the transparent part of a button)

[BAD_karma_Men]

Thank you supremative… I was looking for this solution for a long time and nowhere found solution… really appreciate your response.

[ATGustavsson]

Could a material be used instead of an image texture?
If one would like to have a button scalable/stretched?

[Supremative]

9-Slice control in UE4 – Indie Game Development in UE4

[ATGustavsson]

I tried th 9-slice method, however the shape does not retain it’s proportions. As it’s based on percentage and not Size. So the angle will deform…

[Evan_Patterson]

Thanks for the tutorial! I’d like to add that you should override OnMouseButtonDoubleClick and copy the functionality from OnMouseButtonDown. That will fix an issue where spamming the button causes it to miss every second down event.

[Galney]

Hello !
Thanks for the tutorial and the file ! This is really helpful !
However I have a question, regarding my needs for a project.
Let me explain in details:
1-I am making an rpg in which you have many companions.
2-However, when you go on a quest, you limit the number of companion that are following you. To do so, I have a widget that open so I can select my companions.
3-Once in the game, the main character and the companion are playable. Meaning I can switch from a character to the other.
4-To do so, I am using buttons on a 2nd widget (an HUD basically). And each of this button have the face of the character.

My problem is: the button on the 2nd widget that have the faces of the companion, has to change and be updated, depending on the companions that are selected from the 1st widget. I have tried many things, but I could not find a way to make the pictures (normal, hovered and pressed) getting updated based on variable or event from anoter widget or blueprint. Is there a way to solve this?

Thanks in advance

[JanSeliv]

I’d like to suggest checking out the Custom Shape Button open-source plugin on GitHub. It’s designed to work right out of the box—simply choose a texture with an alpha channel or a material with an ‘Opacity’ input. You can also find documentation and download a sample project to see how it works.

[MilouzA2L]

This is great, many thanks.
To compleat your work I changed the “zorder” of the parent slot depending of the mouse position on the widget, in order to overcome overlapping issues.