Why do my 9 Slice sprites look terrible?

image

On this grey button which is a 9 slice sprite, I have Device Pixel Ratio ticked, the original sprite is set to clamped, but it still looks awful with the bad black antialiasing around the edges. How can I fix this?

Hi @Grimmy,

This is usually related to how the engine processes the alpha channel at the edges of the texture. I know @yaustar has shown a tool before that helps with this at a technical level.

Alternatively, when I have works with 9-slicced sprites, I have found that having the original sprite as close to the target size as possible (specifically the corners) along with making sure your alpha edges are nice and smooth can mitigate the need to process the image with any tool.

2 Likes

See thread Artifacts on our 2D assets - #16 by yaustar

2 Likes

Hi, thanks for this, but I don’t have/dont use Gimp and this seems a very long and convoluted (trail and error) process to get them looking correct in game. Isn’t this a problem that should be fixed or automated at the engine side?
I have a lot of images like this and it’s going to take a very long time just to see them as they should be in Playcanvas.

Unfortunately, it’s a common problem with rendering generally as seen here: Beware of Transparent Pixels - Adrian Courrèges Even GTA V had to do this.

If you have Photoshop, plugins have been suggested in the thread linked earlier by another poster.

To be fair, the GIMP process is basically a few clicks, most of what was in the post was to explain what was happening. Add layer mask, select alpha, use GMIC, apply, save.

I’ve added a ticket to have a potential discussion about this to see if there’s something we could do on the Engine side: Should we be using premultipled alpha for UI images? · Issue #3331 · playcanvas/engine · GitHub

1 Like

Great, in the meantime by pure chance I found that I can get a very good result quickly using ‘Affinity Photo’ and the filter ‘Divide By Alpha’ filter. Just click the filter and its done (No options). See here…

image

Its in Filter/Colours/Divide By Alpha.
image

2 Likes