Fragments on Sprites for UI


im facing problems with Textures / Sprites / Atlas UI Elements. I havent found a setting to avoid some kind of fragments when rendering those spirtes. especially in corners i get some weird black outlines. the resolution of the spirtes (mostly icons) is high - if opening them on windows or previewing them in photoshop, they look fine. Only in PlayCanvas they get those fragments, see screenshot for details.

Are there some settings i can pay attention for? i checked the options on the textures / sprites, changed the filtering (linear / point) / adress U / V settings but i could not make the ui look clean.

Thanks for each tip.

Edit: To use the sprite transitions i’ve created a texture atlas with texturepacker - and respected all dimensions. Same result. When uploading the textures as single files, which would cause more draw calls, the textures seems to look better. but then you arent able to use the sprite transitions (hover, pressed, etc.).

Couldnt figure out, why those sprite boarders look like crap right now.

1 Like

You are using svg images? I think best use for UI is appling the texture to an image element, As I have seen it never have given me this error, perhaps it could be how you handle layering with the UI, but I can’t say much for certain as I don’t know the layout of the project. Using an image instead of a sprite might help make it look cleaner, I have never in my experience making UI experienced this issue when using a texture on a UI image element.


Back to PlayCanvas, I run into the same issue using TexturePacker. My UI Sprites have fragments.

I used both free and pro version. No problem with just a basic single texture imported.

You can have a look on a basic sample there PlayCanvas 3D HTML5 Game Engine.

Any idea @yaustar?

Sounds like this issue off hand Artifacts on our 2D assets - #16 by yaustar

Thank you for the quick answer.

According to your tracks, I tried changing Transparency handling in TexturePacker Pro and Reduce border artifacts did the trick!