How to use such image asset inside your widget

I downloaded a royalty free UI image to use as background for my text widget (please see attached).

There are a lot of different styles of images within one image. What i want to know is how do you usually select one image from so many and use it as your widget background?

Right now my idea is to crop a single image in some image editor software and use that image as a background. But is this the right way?

Thank you.

Wow thank you so much. Yes this approach is much better.

It’s a [Texture Atlas / Sprite Sheet][1] It’s an optimised way of handling many small images.

Right now my idea is to crop a single
image in some image editor software
and use that image as a background.
But is this the right way?

Don’t, you can automate is like so in the engine:

331311-spritesbefore.jpg

331312-spritesafter.jpg

You can now use them with UMG directly.


Not sure how UE4 handles proper atlases. You could do it in a material with Texture Coordinates but it may not be worth it tbh. There are flipbooks. But if your goal is to use these as is, consider my original suggestion.

1 Like

Also, if you’re dealing with frames that need to change size dynamically, it might be worth giving this a quick read - 9 slicing

The info about UE4’s implementation of this technique can be found here, under the Setting Image States section:


I’ve glued one of the borders into a single image, and then:

Image from Gyazo

Event though the overall size changes, the sides do not deform.

Thank you so much. This is very important info that i may have opened a separate question for.

PS : Congrats on being the top karma points earner.