Hi,
So I have a widget I created and wanted to add that to a larger widget for a shop system. However, the widget I made is extremely small and when I try scaling it up, everything gets blurred out. Is there a way to scale it better and keep the look of it the same?
This first pic shows the widget button system I have
This pic shows the widget in a larger canvas
Hey there @Zapking9224! Looks like you want to use your UI elements in 9-Slice mode! Iāve got a thread and another resource that explains it!
Disclaimer: One or more of these links are unaffiliated with Epic Games. Epic Games is not liable for anything that may occur outside of this Unreal Engine domain. Please exercise your best judgment when following links outside of the forums.
Hey @SupportiveEntity
Thanks for the response! That fixed the blurry image effect! Iām also trying to find a way to add an image and text on top of a button. Is there a panel I should put it in that should be attached to the button or how would I go about attaching multiple items to the larger button on the left that I colored red?
Depending on the use case, if you drag a text component into the button and whatever else you need under it you should be fine. UMG can utilize autowrapping as well, so you donāt have to worry too much about scaling once you set it up.
@SupportiveEntity
So a couple things happened here which Iām not sure how to fix. When I add an image or text or anything as a child of the button, it shrinks the button to fit around the child. I know thereās a toggle for āsize to contentā, but I donāt see that option anywhere in the details panel. The other problem is that I canāt add more than one child to the button.
Size To Content is a feature of the Canvas panel slot - only direct children of the canvas can use it.
The other problem is that I canāt add more than one child to the button.
Some widgets can only have 1 child. If you want the button to house more elements, add a panel first - horizontal box, grid, overlay, etc. and only then populate that container with additional widgets.
@Everynone
Ok makes sense. And last thing that comes to mind at them moment. Is there a better way to scale things within the horizontal box? Iām wrapping the contents inside of size boxes and Iām not sure if thatās what they are supposed to be used for.
Depends on how you want stuff to work and what itās used for. It might be OK, it might be redundant, it might be necessary.
When you use a Size Box, you dictate a specific size the Horizontal Box now must tolerate. If you do not use a Size Box, the parent panel will have a much bigger say in how the children behave.
Images, no Size Boxes and theyāre fine:Above, some widgets have an explicit way of telling the parent how large they wish to be. Borders, below, do not do that:
So I wrapped the last one with a size box so it reports its Desired Size to the HB correctly. It can be handy sometimes, and other times it would make no sense to use a Size Box.
Also, Scaling and Sizing are 2 different things. Thereās a Scale Box im UMG, too.
If you ever need a way to address this kind of distortion:
@Everynone
Oh ok, Iām going to look into 9-slice. And I almost have it looking pretty good with sizing. But now itās cutting off the text and the rest of the widget. It might have something to do with the text not being formatted correctly inside its horizontal slot.
Youāve added those buttons to something, to some other panel ā that panel now control how they behave.
It generally goes like this:
But sometimes you place stuff in a canvas and the canvas is that granddaddy that lets anyone do what they want and say Size To Content as you wish, not going to hold you back.
There is also something in UMG called Clipping - its rules control how content spills out of containers:
Can be handy if you do not care or cannot care about the size because you may not know it upfront. Like a magical sword with a couple of procedurally generated prefixes and affixes.
And a note about spacers since we have some around now. Theyāre fine but they WILL clutter the hierarchy of complex widgets, and each widget you add adds to complexity and performance cost. In many instances you can get away with padding instead of a dedicated spacer.
Those 2 images sit in a horizontal box but the right one wants 10px space from the top and left:
Beats using a spacer imho. Especially that every slot has this feature and some specialised slots have extras on top of that. This is actually another way to size things. Weāre saying here that this image can be as big as the parent slot allows but 10px must be preserved.
Epic does not want you know this 
but padding can be negative:
If you now combine it with clipping mentioned above, you can rapidly get some cheap effects.
