1
\$\begingroup\$

I am running into an issue with my UI.

Basically I need to have a lot of small icons, similar to many other games, here is an example:

enter image description here

With Mip maps:

enter image description here

As you can see, these look awful. This is simply a UI Image with size 15x15, it seems when they get too small it simply does not look good. It has nothing to do with import options or anti-aliasing, I have tried everything there. I submitted it as a bug but according to Unity it simply will not look good when images are scaled down too much.I have tried both PNG with large resolutions and small, I have exported the .SVG vector image and tried using that, all look bad when scaled down.

So what are my options then when I need small icons? How do other games do it?

Here is a link to the actual .png file: https://ibb.co/nDG0hmD

For reference, here are the same icons zoomed in, as you can see, they look fine:

enter image description here

Im developing for PC.

\$\endgroup\$
4
  • 2
    \$\begingroup\$ It looks like you're displaying the icon at a resolution different than the source asset. When you do that, the graphics card has to re-sample the image to display it, leading to unsightly rounding or blurring. The way to make your icons look their best is to save the asset at the exact resolution you'll be using on-screen. \$\endgroup\$
    – DMGregory
    Aug 10, 2020 at 18:53
  • \$\begingroup\$ Or if you don't want to rescale it, just import it at 258 PPU (since your image is 258x258) and it will fill one of those squares. Depending on your camera it is small/ sharp \$\endgroup\$
    – Zibelas
    Aug 10, 2020 at 19:02
  • \$\begingroup\$ @Zibelas that won't necessarily solve the problem if the window size is such that one of those squares ends up being more or less than 258 px on-screen. Then you're back to the same issue of runtime resampling. \$\endgroup\$
    – DMGregory
    Aug 10, 2020 at 19:24
  • \$\begingroup\$ @DMGregory You are right, I am displaying it in a 16x16 Image, scale 1. But the resolution of the image is 258x258. I am not sure if using a 16x16 image means Its actually displaying at a 16x16 resolution, but I have tried exporting at several resolutions and none really look good. \$\endgroup\$
    – Majs
    Aug 10, 2020 at 19:53

2 Answers 2

1
\$\begingroup\$

This is an attempt to use font-hinting to give you more control over how your graphics are rendered when scaled down.

This is your UI with the icons implemented as a hinted font:

StackExchange scales images down, so double click the images

enter image description here

Same image as above in the center, but with your samples flanking it (double click it):

enter image description here

Same as above, but at 3X scale (double click it):

enter image description here

3X Animated GIF of icons translating downward by partial pixels (double click it):

enter image description here

Text Object vs TextMeshPro (seriously, double click it)

enter image description here

Again, StackExchange rescales and resamples everything, so double click the images to see them un-mangled.

I imported the regular fonts with "Hinted Smooth":

enter image description here

I'm not an expert at creating hinted fonts or how best to render them in Unity. If anybody has tips for using hinting in Unity more effectively than I've done here, please share.

The animated GIF suggests to me that hinting isn't applied effectively when text can be positioned between pixels like I was doing.

REF

\$\endgroup\$
1
  • \$\begingroup\$ I had this idea as well and was looking for fonts I could download, never thot to make my wn, this is great! Thank you :) \$\endgroup\$
    – Majs
    Aug 11, 2020 at 8:55
1
\$\begingroup\$

There are two easy ways to fix this issue in the import settings for your icon texture, each which has its own pros and cons:

Texture import settings

  1. Enable Mip Maps. This tells Unity to generate multiple versions of the texture at different smaller resolutions. This way the image will generally look much less aliased at lower resolutions. However, at some screen resolutions the texture may appear slightly blurry (e.g. the optimal size would be 40x40 but the closest mipmap is 32x32 so Unity scales up the 32x32 mipmap slightly). It also increases your build size slightly since the build has to include multiple versions of each texture (IIRC the rule of thumb is that the texture will take up 33% more space when mipmaps are enabled). If your texture is in an atlas, you will need to enable mipmaps for the atlas.

  2. Reduce the "max size", which is effectively the same as reducing the size of your texture in an image editor before importing it into Unity. This can work well when the resolution of the final game is known - e.g. if it's a console game that will always run at exactly 720p. However, if your game will be on a platform where screen resolution can vary widely (e.g. mobile, PC), the new smaller size might be too small for some resolutions, causing the icon to look blurry.

\$\endgroup\$
8
  • \$\begingroup\$ You may want to include displaying the icon in a UI canvas set to Constant Pixel Size so that you get 1:1 pixel scaling with no resampling. \$\endgroup\$
    – DMGregory
    Aug 10, 2020 at 19:42
  • \$\begingroup\$ I have tried Mip maps but like you said, it ends up being blurry. Option 2 is not really an option since its for PC. \$\endgroup\$
    – Majs
    Aug 10, 2020 at 19:51
  • \$\begingroup\$ You can see my edit to see what it looks like with mipmaps \$\endgroup\$
    – Majs
    Aug 10, 2020 at 19:57
  • \$\begingroup\$ @DMGregory In my experience, Constant Pixel Size is treacherous because differences in DPI on your target devices (particularly on mobile) can mean unacceptable variation in the physical size of the UI. \$\endgroup\$
    – Kevin
    Aug 10, 2020 at 19:57
  • \$\begingroup\$ @Majs Are you still developing the game, or is it just about finished and you're trying to do a last round of polish? If you're in the former situation, I'd recommend going with mip-maps for now and worrying about polish later. There's nothing worse than missing a deadline or not finishing a game because you got too hung up on little details. \$\endgroup\$
    – Kevin
    Aug 10, 2020 at 20:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .