How to Adjust Images on Widget BP

Trying to make an in game menu, when i make it in aseprite it looks like this


in the app i can easily adjust the buttons and background perfecty by pixels, but in the unreal i cant even get a good scale. If i use the image by not changing its size its so small that you can barely see it. If i make it bigger with a scale box then i cant properly locate the buttons because i also need them bigger again and cant get the same scale on both the background and the button image. So what i am asking is how you do these kinda things? Is there a better way that i dont know which i probably dont know because idk anything about widgets or ui.

As i mentioned on your previous topic, you need to break the image into parts.

Similar to that documentation from epic: UMG Best Practices in Unreal Engine | Unreal Engine 5.5 Documentation | Epic Developer Community

I already did the breaking part


my question was how can i align them to make it like the one on the aseprite and scale them to a proper size. On the aseprite i aligned them by pixels but in here i cant do it because when i move something its so shaky.

You can use a combination of horizontal box and vertical box inside your canvas panel.
From these box, you will add those buttons.

Maybe the following will help a little…

At the top right, there’s a dropdown. Select “Custom On Screen”. Fill in the width and height a multiple of the pixel size you want to use for the layout of your widgets. Doesn’t need to be the size of the screen.

Also at the top, there’s this little grid icon. Make sure it’s blue. Then you can set the snap multiple. So if your layout would be 100x100 in pixels, but you set the width and height to 400x400, then set the snap to 4.

This will let you place your images or widgets at pixel locations. Unfortunately, the size does not snap. Maybe someone knows of a way to get the size to snap. So you’ll have to set it somehow. But at least now you can move it around and it will snap to pixel offsets. If you’re placing images, you’ll have to play with the image size property. If you get blurry images, you may have to set your textures’ “Filter” property to Nearest.

When i do this the widget that appears in game is being so small and on the top left corner, how can i fix that?

This :point_up_2: is the ideal and most versatile way to handle it but it does require some familiarity with how containers works. If you’re OK with being cheeky and cutting some corners, you can try to nest a couple of canvasses:

The Outer creates a slot in which it holds the Inner - this slot enforces alignment, positioning, desired size, and so on for the entire menu:

The Inner holds your buttons / images:


This is just a preview that helps designing widgets, and you can set its size:

This menu is actually 512x512 and it would look like this :point_up_2: in a (dotted line) 600x600 px space. Also, if you’re going to work with UI, wrapping your mind around how anchors work is highly recommended:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.