Need help with Images in Widgets

Hey there

I am trying to recreate a dialogue box I made in Unity in UE4 instead using the Widget blueprint. I am pretty much almost there but as you will see below, the images that I use as borders and such are not…“right”. They stretch out whereas in Unity I was able to define a border on the picture so that it could tile it next to each other perfectly.

So here is the UI I made in Unity:

And here is my attempt to recreate it in UE4:

You should be able to tell what the issue is here. But how do I solve it? Like I said, in Unity I went to the image that I use as a background for the Nameplate and Dialogue (which is 128x128) and defined pixel perfect boundaries around the image like so:

But I couldn’t find anything like it in UE4 so what should I do?

You will also find that the components needed to make the interface are fairly different in numbers (but that’s just a minor thing):

The easiest way to do it is to simply punch in the padding value for the slot. As in: wrap the *image */*text box *with a *border *and set the image’s/text’s padding to X pixels from all sides.

Alternatively, if you need a fancier border (rather than a colour), you will need to look into 9 Scale Box, have a look at the section Setting Image States over here: Styling | Unreal Engine Documentation

But I’m trying to make the UI scale to a 16:9 resolution. Wouldn’t punching in “magic numbers” (as we call them in programming) make this a problem when scaled between different resolutions?

2 pixels is 2 pixels, no matter the resolution. If you need to adjust the border size, you can still fiddle with the padding value dynamically.

Ah, using the Box Mode and the Margins solved the issue:

62fd6b04337c86775f21bf1b31fba035ddb8269e.jpeg

Made a little video of it in use.