Showing png icon is pixelated in worldspace UI

We are facing a problem where we are trying to showing the png icon in the worldspace UI but they are coming too much pixelated.

We are using this example here

Hi Osama Aftab,

To address the pixelation issue with PNG icons in your worldspace UI, consider the following:

  1. Texture Resolution: Ensure that the PNG icons are of adequate resolution. Low-resolution PNGs will appear pixelated when scaled.

  2. Canvas and Scale Settings: Adjust the settings of your canvas. Ensure the Render Mode is set to World Space and check the scale of the canvas. If the canvas is too small relative to the world scale, it can cause pixelation.

  3. Image Component Settings: Check the settings of the Image component used for the PNG. Adjust the Image Type and see if changing it from Simple to Sliced or Tiled has an effect.

  4. Material and Shader: The shader applied can impact the appearance. Use a shader that best suits the UI elements.

  5. Quality Settings: Make sure the project’s quality settings are optimized for rendering UI elements effectively.

  6. Anti-Aliasing: Enable or increase anti-aliasing in your rendering settings.

To aid in your debugging, you might want to share more details regarding your current implementation, such as:

  • The specific resolution of the PNG icons being used.
  • Any specific scale settings of your UI canvas.
  • The Needle Engine version you are using.

Each of these factors can significantly contribute to the visual quality of your UI icons. Check and modify them based on the suggestions above.

For further reference, you might find the following links useful:

Feel free to reach out if you have further questions!

1 replies left - Get a PRO license for more AI replies.
thread_pZnJk9jp077cr4W03DmbIQc2
Reply to this message to continue the conversation

Hello, could you share more details and screenshots of your image on disc and how it looks in Unity vs in Browser?

You might want to change the texture compression to use webp (if it’s compression related, but that’s not clear without more information)

@marcel what @osama_aftab is saying in unity are image is not pixelated but it browser it is pixelating from the edges. And you can also see the optimization info below.


Can you provide a bug report project or an URL to look at the issue? Hard to tell from the screenshot

@hybridherbst i’ll send you a URL asap

@hybridherbst this is the link as you see in the image the images are pixelating from the edges.

@hybridherbst any updates?

Sorry, but still hard to tell what objects you combine here. I can see that the circle has pixelated edges, but the object that fades in when hovering the circle does not have pixelated edges.

Can you check how these are different? Is the circle/shipping cart texture maybe just very small, or has incorrect alpha values in the edges?

Actually the image behind the circle is one unity own sprites and the circle and shopping cart that pixelating are imported sprites/images that we are using.

@hybridherbst could you please help us here.

Hello, thanks for the bugreport. The edge stepping on the image looks like aliasing. It looks exactly the same as in Unity.

This is how it looks in Unity


And this is in the web


so i need set to it from the unity quality settings. Because no matter how high resolution i import in unity in became pixelated from the egdes

@marcel can please help me figure this out as well because no matter how much high resolution image i import on unity it still pixelated from the edges in canvas and also in browser. And that’s not the case with unity default UI sprites.

The builtin UI is not actually a graphic but a mesh with the rounded corners, that’s why the resolution is always infinitly better (we don’t actually use the sprites from Unity when we detect those).

so should 2d sprites for UI instead of UI images?

Im not sure what you mean

What i’m trying to say is that when i’m using custom sprites for world UI. No matter the resolution the always pixelated from edges

@marcel Perhaps if you could suggest him the right solution base on our use case?

I believe what Marcel meant is that the sprites look the same pixelated already in Unity. If the quality is not sufficient, you’ll need to adjust the sprite settings in Unity or use higher-resolution images with properly antialiased pixels.