0
\$\begingroup\$

I recently drew a game sprite for my game using Adobe Illustrator 2021. I exported the sprite using the Export for Screens menu to export the entire artboard. The problem I have in Unity 2021+ is that when I import the svg sprite and add it to the scene view, the sprite appears to have incredibly low resolution in the game view. I have already installed vector graphics to Unity (com.unity.vectorgraphics) and researched about the issue I'm having to no avail. The sprite is 396 x 278 pixels in adobe illustrator before exporting. Here are a few screenshots of my svg sprite in Unity:

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

As you can see in the 4th image, even though vector sprites should have scaling resolution when zoomed, the resolution is extremely poor when zoomed in the game view. I have already tried the following methods to fix my issue:

  1. Increasing Pixels Per Unit: Turned out that this actually decreased my resolution even more. As pixels per unit increased, the sprite in the game view became smaller and smaller until it became a singular pixel
  2. Increasing Gradient Resolution: Did not do much for resolution quality after the value of 100.
  3. Changing Tesselation Settings to advanced and minimizing Step Distance as well as maximizing Sampling Steps: Similar increasing Gradient Resolution, there was a limit to how much it improved sprite resolution quality.

Those of you who have experience importing and using vector images in Unity 2021+, please help me fix this issue. This is stalling my other development progress as well, since one of the shaders I have to implement relies on high-quality sprites.

*Added main camera settings

\$\endgroup\$
4
  • \$\begingroup\$ Can you add as well your camera settings for comparison? \$\endgroup\$
    – Zibelas
    Dec 28, 2022 at 14:36
  • \$\begingroup\$ The zoom setting on the game view does not render the game view (or any SVGs in it) at a higher resolution. It renders it at the original resolution, then takes that resulting raster image and enlarges that for closer inspection. So it's not obvious to me here that this is a problem with the SVG rendering. If you scale up the sprite with the transform scale properties or by shrinking the camera view, instead of using zoom in the game window, do you continue to see pixelation? \$\endgroup\$
    – DMGregory
    Dec 28, 2022 at 15:19
  • \$\begingroup\$ When I scale up the image, the resolution does not drastically decrease. It is only when I zoom the camera in the game view that deteriorates the resolution drastically. I'm afraid that this is what the users will see on their mobile phones. I will do a test on my phone and provide the results! \$\endgroup\$
    – rasputin
    Dec 29, 2022 at 10:50
  • \$\begingroup\$ To simulate what users will see on different mobile phones, change the Resolution setting of the Game window, not the Game window's Scale setting. The Resolution drop-down changes the number of pixels that get rendered. The Scale slider just looks at them closer. Just like a real phone, looking closer does not make new pixels appear on the screen — the screen only has as many pixels as it was manufactured with. So even when rendering a vector image, there's a fundamental hardware limit to how detailed you can draw it, due to the display, and that's what the Game window is faithfully showing. \$\endgroup\$
    – DMGregory
    Dec 29, 2022 at 11:57

3 Answers 3

1
\$\begingroup\$

As mentioned in the comments, you're using the wrong method to check how the SVGs scale.

The zoom slider in the game window does not re-render your scene at a higher resolution.

It takes your existing render at a fixed resolution and draws each pixel larger.

So no content, not SVGs, not SDFs or other mathematically computed effects, nothing will get more detailed or smoother as you zoom in, and that's the deliberate behaviour of this zoom feature.

The reason for this is so that you can more easily examine things like aliasing artifacts without having to peer uncomfortably close at your screen, or take screenshots to enlarge in another program, or use an extra magnifier app hovering over the Unity window. It integrates this "let me see those exact pixels, but bigger" workflow into the editor interface itself.

To see how your game would look at a different resolution, keep the zoom slider at 1x and change the resolution drop-down box in the top left corner of the game view. This changes the size of the virtual screen the game is being rendered into, prior to any pixel zooming. So SVGs, SDFs, and other shader effects will be rendered smoother as you increase the resolution here. This rendering will faithfully match what you would actually see on a device that has more (or fewer) screen pixels to draw on.

\$\endgroup\$
0
\$\begingroup\$

Internally, all graphics are rasterized before they are sent to the video card.

My takeaway from this insight is to save your image in the largest dimension to a PNG.

Memory is cheap, scaling is a standard operation in the GPU and not so bad on the CPU, whereas runtime rasterization is an expensive CPU operation.

If memory or GPU transfer time is the bottle neck, use mip-maps instead.

Efficient real-time vector graphics last happened on a control board in a CRT for several Arcade games in the 1980's. It is a great idea, but has no modern hardware support.

Just because a feature is there does not mean it should be used.

\$\endgroup\$
6
  • \$\begingroup\$ So there are no notable modern games that make use of vector graphics? \$\endgroup\$
    – rasputin
    Dec 29, 2022 at 10:50
  • \$\begingroup\$ None that I know of. It has been discussed and debated, but without actual hardware support, no modern engine has offered non-rasterized vector graphics until Unity, But even their implementation has to rasterize the image to a fixed resolution at some point. \$\endgroup\$
    – user122973
    Dec 29, 2022 at 11:05
  • \$\begingroup\$ @rasputin A vector graphics file is a glorified Mesh/collection of meshes (I mean, conceptually, almost all of the most used constructs in a vector graphics are just lists of polygons with lists of points that use come combination of relative and absolute space coordinates - paths, polygons, shapes, etc). If Unity actually rasterizes their SVG's, as opposed to using the SVG data to create a mesh and an accompanying material and upload them to the GPU via that pathway, then they're choosing a super inefficient method. \$\endgroup\$
    – Jax
    Dec 31, 2022 at 6:17
  • \$\begingroup\$ Like, I've written code that performs SVG -> Mesh conversions, and I know you could find several different code bases that also do the same thing on Github with a little search. \$\endgroup\$
    – Jax
    Dec 31, 2022 at 6:20
  • \$\begingroup\$ If Jax has a better solution, I welcome it. That is the purpose of this platform, to provide better solutions. \$\endgroup\$
    – user122973
    Jan 3, 2023 at 3:52
0
\$\begingroup\$

My fix is to import your vector art as PNGS and increase the max size to something high like 8192 in the sprite inspector. Here's what to change:

Change this value and see what value is best for your sprite

I had the same problem with my sprites. I designed them as vector images and imported them as PNGs in the way I described above. Hope this helps.

\$\endgroup\$

You must log in to answer this question.

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