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.

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.