I made a widget which I can place on my HUD on to a canvas. It basically only holds an image (well, overlay, and also a text block).
The problem is that compared to the source-image the image will look very bad ingame.
I have set the widget / image size to 32x32 when it is added to the canvas, but the original PNG size is 512x456, so it gets scaled down.
What settings do I have to make so it will look better?
Im also looking for an answer to this… So stupid that there isn’t a clear solution on this
Images are textures, and textures have LOD while used in game. To avoid any downscaling by the engine, use Texture Group = UI and NoMipMaps. These settings are in the texture details panel.
If this doesn’t solve it, its probably because you are starting from an image that’s too big and the engine cannot scale it down so much without losing detail. So scale it in a gfx program like GIMP and import it again in UE at smaller res.
did you solve it?
@Shizai Basically when you do a widget image, and you set the correct resolution of the image in the detail panel you should then add that widget to a Blueprint actor:
This was the only way I could get UE to render the image properly without losing quality is by increasing the draw size to the correct resolution or duplicating it which adds more fidelity if I’m not mistaken.
Try it yourself, because the image size option in the widget itself is just defining the image scale but not resolution where as the one in the blueprint actor is more of a resolution definition rather than physical scale.
Yes, there are images with poor quality. But still it is worth looking for a base where there are high-quality images. I am creating and designing a health logo now. And vector images, which I found quite by accident, help me to make an interesting result. But I was very pleased with their quality.
this is solution
very nice!
This tip helped me a lot to solve the problem. Thanks!
Make sure your UI texture is not too big. Set a maximum texture size and Unreal will scale it down and will help it look better when used.
Tried everything here, didn’t end up working for me, I’m trying to get this heart:
Like I said, I’ve done everything on the list here, no mipmaps, setting draw size properly, applying paper 2d, and setting max texture size, none of it worked, or really changed anything, no idea what could be the problem.
There are … four? problems here.
First: If you want it to be 32x32 on the screen, anything above 64x64 is probably not needed, and anything above 128x128 is showing no respect for the user’s RAM and download resources.
Second: If the image is supposed to be exactly square, then the input image should also be exactly square. Open it up in Photoshop and resize canvas to make it so. Else, you will get jaggies from the stretching that happens.
Third: UI widget textures should typically be set to the texture quality “User Interface (RGBA)” which is not the default when importing; compression artifacts are frequently quite noticeable in UI assets.
Fourth: You should make sure to calculate MIP maps on import, if you haven’t. “No MIP maps” is typically bad advice. If you find that you get too blurry images, you can bump the anisotropy up in your sampler/shader settings, and maybe add a little bit of MIP bias (-0.5 or so) but generally that’s not needed.
Fifth (bonus!): If you’re going to rescale an image, it’s typically a good idea to use a Scale wrapper around it, that makes sure it’s scaled uniformly, either to fit or fill (depending on whether you want empty or clipping when the container aspect is off.)
Right-click on the image file in your Content Browser, then open the Edit page. In the Details panel, the first section is “Level of Detail.” Set it as follows: the “Texture Group” must be set to “UI,” but for “Mip Gen Settings,” set it to “SimpleAverage” or “Angular.”
