x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

UMG Textures extremely pixelated

I'm trying to make a simple "weight" icon in my umg.. Putting an Image widget set with the texture, and scaling it to size. It's looks horrible. I've googled and tried several thing, but I simply cannot get it to look nice a smooth.

What can I do?

alt text

Product Version: UE 4.8
Tags:
umgpielated.png (163.9 kB)
more ▼

asked Jul 14 '15 at 11:55 PM in Rendering

avatar image

vanlacke
1.5k 65 132 103

avatar image CanarLaquais Jul 05 '17 at 03:40 PM

I have the same issue I have lot's of icon with many different size that changes with animations and i tried everything for the setup in the details of the texture. But with my 256x256 texture when i try to have on icon 90x90 it becomes very blurry. last post on this topic was 2 years ago. do you have a good solution not involving making a material for each icon now?

(comments are locked)
10|2000 characters needed characters left

3 answers: sort voted first

Hey vanlacke,

Open up the texture sample you are having issues with and take a look at the settings applied within.

Texture Settings

alt text

Try changing the 'Texture Group', the 'Filter' applied, as well as the 'Compression Settings'. All of these will have an effect on the final render of the image in your scene. My first guess would be to set the 'Texture Group' to UI and then the 'Filter' to 'Trilinear' to smooth out the edges. Usually you want to keep the filter at 'Nearest' which gives your sprites and a sharp look at the pixel level.

Let me know if you have any other questions.

Cheers,

Andrew Hurley

more ▼

answered Jul 16 '15 at 07:06 PM

avatar image vanlacke Jul 16 '15 at 08:54 PM

I did try all of those settings. Seems like I've tried just about every combination.

I also tried different sized textures, 32x32, 512x512, etc.. Haven't done 256x256 like in your image, but I doubt that's it...

The absolute smoothest I've been able to get it:

alt text

But that adds a white line around it.

Could it be that the engine simply doesn't support such small icons? I tried to find an example of textures used in UMG from Unreal project examples, however they all are usually larger. If I make my weight icon larger, it certinaly looks much, much better. But I need it small.

Thanks for the reply!

EDIT: Could it have something to do with straight lines? If I shear even a built-in widget, it becomes horrible pixelated..

And even a larger icon is still visibly not smooth

alt text

smoothest.png (1.4 kB)
smoothest.png (96.1 kB)
avatar image AndrewHurley Jul 17 '15 at 02:54 PM

You will get better results when you import a larger texture, say 1024x1024 and scale it down from there. Up to a point, no matter the texture resolution, you will see some pixelation when you reach a very small value.

"Weight" Texture Settings

alt text

Image as UI

alt text

You could go into photoshop and increase the bits per pixel to help with this, but below is an example of the different sizes and their appearance. The object will be so small on screen that unless the user is sitting very close, the small pixels will not be noticeable.

Regards,

Andrew Hurley

avatar image vanlacke Jul 17 '15 at 06:06 PM

I had even tried a 2048x2048 texture with the same settings. So it sounds like it just simply isn't possible to get smooth icons then? I agree it wouldn't be noticeable during game play, but it really bugs me right now.

Yours certainly does looks better though. What reason could it be that my pixelation is so horribly noticeable, and yours isn't?

avatar image AndrewHurley Jul 17 '15 at 06:22 PM

It could be my monitors resolution in combination with the file type. The image I used was a .PNG file type. Did you also try applying a different filter, like Tri-linear or Bi-linear?

avatar image vanlacke Jul 17 '15 at 06:45 PM

Well, that did it for me. Sort of....

So, I haven't been doing PNGs because they don't seem to bring in their alpha channel, but clearly you did it so I gave it a shot. The only way I found of making it work was making a material, and setting the texture compression settings to alpha.... and, well, making a material and using that. The results are fantastic, but I'm still confused because it seems like you're not doing it this way.

Here's a comparison screenshot with a texture setup with your settings, and with a material with only one setting change (compression to alpha, just so I could use the alpha channel in the material)

alt text

smoothest.png (102.9 kB)
avatar image AndrewHurley Jul 20 '15 at 01:43 PM

Yeah I would expect a different result when using a material and pulling from the alpha channel. You are only using the information from the single channel of the texture instead of the entire RGB values output as an image.

My results will also vary because of my native computer resolution and the bits per pixel of the texture sample I was using. Using a material is not a bad idea as it can give you (as you recently discovered), greater control over images. If you are getting great results with this, I would use this approach! Either way I am glad you were able to learn a little bit and get your issue to resolve after trying various approaches.

If you have any further questions please let me know.

Cheers,

Andrew Hurley

avatar image Banzuke Jul 05 '17 at 04:41 PM

i think you can just make up some anti-aliasing in photohop and it might look fine

avatar image CanarLaquais Jul 05 '17 at 05:56 PM

the only way to have something ok that i found for now is to have each size of each icon, but with this method I have issue for 4K resolution and it

(comments are locked)
10|2000 characters needed characters left

Try making the image you made and the image in umg the same size. i made this with Illustrator and it worked for me

more ▼

answered Jan 10 '19 at 11:33 AM

avatar image

MTurk
28 1 3

(comments are locked)
10|2000 characters needed characters left

Try to setup material settings from masked to translucent. It worked for me.

more ▼

answered Mar 04 '19 at 07:43 PM

avatar image

Bartosz Kamol Kamiński
31 1 5

(comments are locked)
10|2000 characters needed characters left
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question