3
\$\begingroup\$

My game has vector icons and sprites, like this one:

enter image description here

Its quality disappoints me. I guess that antialiasing is disabled here for some reason, but have no idea how to turn it on.

The problem is only with UI component SVG Image. Sprite Renderer seems to not have this issue:

enter image description here

Regular Image does not support vector icons. I tried this approach.

MSAA is enabled on Camera and in Quality settings. When it's disabled, second sprite becomes exactly the same as first.

Unity version: 2018.2.7.f1 for Linux
Vector graphics package version: 1.0.0-preview.23

I will accept a solution or an optimal workaround of any complexity. But please don't suggest using raster images.

Why?

  • I have to compress them because the game is for WebGL and I already had problems with memory because of textures. Vector sprites take less memory.
  • Without mipmaps icons are pixelated. With mipmaps, they look blurry. They are all power of two, but at different scales. They are even blurred different, some more, some less. I can't use fixed-sized sprites because there's an animation that changes zoom, and canvas will rescale in fullscreen.

Vector guns are to the left, raster ones with mipmaps - to the right. Thin black border lines are gone.

enter image description here

enter image description here

Improve this question
\$\endgroup\$
5
  • 3
    \$\begingroup\$ Can you explain why rasters are unsuitable for your needs here? They're somewhat of an industry standard for small icon graphics like this, so if you have a particular need to not use them, it sounds like a relevant detail to expand upon in your question. \$\endgroup\$
    – DMGregory ♦
    Jun 19 '19 at 11:02
  • \$\begingroup\$ @DMGregory question edited. \$\endgroup\$
    – trollingchar
    Jun 19 '19 at 11:38
  • \$\begingroup\$ The blurring artifacts you're showing usually come from a mismatch between the native resolution of the asset and the size you're drawing it on-screen. If you have a standard size you're drawing these icons, you can eliminate aliasing and blurring by exporting the raster asset at exactly that pixel size. If you don't down-scale it, then you don't need mipmaps for UI sprites. \$\endgroup\$
    – DMGregory ♦
    Jun 19 '19 at 12:17
  • \$\begingroup\$ @DMGregory they have animation on mouse hovering which alters zoom. I can't avoid blurring. They're also scaled for different screen resolutions. \$\endgroup\$
    – trollingchar
    Jun 19 '19 at 12:19
  • 1
    \$\begingroup\$ Then that's the constraint you should describe in your question. \$\endgroup\$
    – DMGregory ♦
    Jun 19 '19 at 12:20
3
\$\begingroup\$

Antialiasing in overlay canvas is broken and won't be fixed. However, there's a workaround that worked for me:

Set the canvas Render Mode to Screen Space - Camera, and then set its Render Camera to your main camera.

Antialiasing will work. It breaks some features, spotlight masks for example, but it's okay because I don't use them. More info in this thread on Unity forum.

If you have a separate canvas for background, you will need to change it too, because overlay canvases are rendered over other canvases.

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.