Weird border with transparent png

Greetings all!

I have a problem when using sprites made out of PNGs with transparent areas. I get a grey border around the non-transparent parts of the sprite. I think the best way to explain is with a picture :smile:

The first ring is a screenshot from Gimp, the checkered area is what is transparent. The second ring is still in Gimp, I just added a white layer behind the ring to show that there is no grey border around it. I save the image to dropbox and import it to Codea using readImage(). Then I place it on a white background using sprite(). The result is the third ring. It has a grey border both outside and inside the ring as you can see.

That’s my problem :smile:

The sprite is just 32x32 pixels so I enlarged it. It looks to me as the sprite has been smoothed or something, the pixels are smaller than the ones on the Gimp screenshots. Retina?

Are you using smooth or noSmooth to see if that makes a difference.

What does the ring png look like if you open it from the Dropbox (in your computer file browser or the Dropbox website, not in Gimp or Codea), does it look correct?

I wonder whether it’s something to do with premultiplied alpha? If an image’s premultiplied alpha flag is set, the RGB is multiplied by the A, which could be causing that darkening effect around the areas that fade out? Just a guess. It’s discussed a little here: https://codea.io/reference/Graphics.html#image

A few things you could try. In Codea, put print(image.premultiplied) after the readImage (where image is whatever variable you’re storing the image under), and see whether it prints true. If it does, try setting it to false.

Alternatively, you could see whether gimp export says anything about premultiplied alpha in its png export settings.

Thank you for the answers! noSmooth() did the trick!
I thought that only applied to lines, but apparently it smoothes everything.

It’s the anti aliasing that creates the border, noSmooth disables it