How to create a scalable round button in UMG?

Development Programming & Scripting UI
, , , ,
1

I created a custom widget in UMG. It consists of a button, an image on the button, and a text under it, all in a CanvasPanel. I replaced the button’s textures in the style tab with my own circular button images. But when I place the widget inside another widget blueprint and change its Size_X and Size_Y (in the same ratio), the circle gets deformed instead of scaling properly. How can I solve this problem? (hopefully without creating a button class from scratch)

28645-ue4_button_circle.png

28647-ue4_button_deformed.png

2

This is mostly likely because you’re drawing this image as a Box, which is buttons default setting. In the UMG Editor when you have the button selected:

  1. Check your details panel

  2. Check for the Style subpanel

  3. Uncollapse the style subpanel if it’s not already uncollapsed

  4. Check the “Draw As” dropdown and make sure it’s in “Image.”

36946-drawas+image.png