Ugly problem with alpha images!

I've got an ugly issue with my alpha mapped 24 bit PNG's!

Whenever they are drawn at non-integer pixel boundaries, I see white pixels being blended in around the edges, as if all areas with an alpha of 0 had been filled in with white, and the bilinear filtering is grabbing that color around the borders to blend with!

And sure enough, if I disable filtering on my images, then the problem goes away, but then everything which is rotated or scaled down looks like ass, (even if mipmapping is enabled... oddly) and that's just not acceptable!

Has anyone had this problem? Does it have something to do with how the PNG's were saved, or what program was used to create them? If there were image data in those areas, then there wouldn't be a problem.

The only way right now I could potentially solve this issue would be to clamp the positions of all my sprites to integer boundaries, but then the movement wouldn't be as smooth, and there's no guarantees that will help with stuff which is rotated.

I found the problem. It is indeed the program used to export them which is the issue. In my case, Photoshop.

Someone posted a "defringe" program in this thread which seems to solve the problem. I still have some white specks, but they could just be the artist who messed up, or me when I edited the art and resaved it after it already had the white transparency from a previous save:

http://www.blitzbasic.com/Community/posts.php?topic=50808#566036

Seems to make most png's smaller than the photoshop ones too, but those it makes bigger it makes much bigger so I guess I'll look into a program called png crush that someone mentioned.

Maybe SuperPNG may help. A free Photoshop plugin, that saves PNG by not using "Adobe's PNG format". But I have not tried yet.

http://www.fnordware.com/superpng/

Yeah, the SuperPNG plug-in does indeed eliminate the fringing but you have to faff around with the alpha channel. Although some prefer to do it that way, I just find it easier to run the final image through DeFringe.

I generally use pngcrush anyway, as the PNGs PS creates are often far bigger than they should be.


I really must put a proper front end on that thing at some stage. ;o)

Have you tried a 1 pixel border all round the image? This solved a crappy anti-aliasing issue at non-int coords for me. It's probably not be the same issue of course.

OK, I've ran into the same problem. My artist sent me some text and when drawn at non-integer coords, OR when scaled it looks crap (see the black outline on the tops or sides of letters).

Take a look:



Here's the code:

Strict
Graphics 600,400

Local image:TImage=LoadImage("play.png")

SetClsColor 200,200,200
Cls

SetBlend AlphaBlend
DrawImage image,10,10

DrawImage image,300,10.5

DrawImage image,10.5,200

SetScale 1,1.5
DrawImage image,300,200


Flip

While Not KeyHit(KEY_ESCAPE)
Wend

Here's how I drew the 4 images:

1) (top left) integer coords
2) (top right) fractional Y coord
3) (bottom left) fractional X coord
4) (bottom right) integer coords but scaled to 1.5 in Y. Notice how the uglyness is really obvious!

As sswift says, turning off filtered image sorts it out but the scale ones loop rubbish (blocky)

I'm gonna have to check out this defringe thing now.

woo, defringe.exe works great, thanks Ian.

However, if I get the image in Gimp 2.0 and resave it with Save Background Color and Save color values from transparent pixels unticked, it doesn't fix it even though this was stated in that other thread by Ian. Perhaps it only works on new images? Also notice my issue is with black pixels not white ones...

hmm, I take it back. defringe *almost* works great, but I think it only works on the outer edges, not any inner edges, as it half fixes the problem, look:



It's most noticeable on the lower left image. Perhaps it's because there was a shadow there?...

DeFringe just scans the image and replaces the colour of any zero alpha pixels with the average colour of all surrounding, non zero alpha, pixels.

I'm not really sure what I'm supposed to be looking for in the above image, but the nature of filtering makes some blurring unavoidable.

The most obvious problem I see there is that the image is cut off. Better remove the shadow there or make the image larger ...

But actually I don't see any problems on all the images beside the potential problems the bottom right could have due to non-uniform scaling

I don't know why you put them on a gray background. If there are any speckles around the egdes, they'll be white, and that makes any harder to see.

But you say your problem is with black pixels not white ones? What are you saving these from? As far as I know, with Photoshop you get only white pixels.

Yan/Dreamora: in the second image I posted, look at the bottom left Play. can you see the little black lines/pixels on the sides of the letters? most noticeable on A and Y (compare with the top right image where ther are none). This isn't blurring it's the filtering averaging with black. These are not there with filtering turned off. This is because defringe nearly worked perfectly but doens't work on those areas as there must be a tiny bit of shadow there. Also I know about the truncated shadow, thanks.

sswift: I put them on a grey background as I am getting BLACK speckles. The artist is using photoshop which is why I'm confused they are not white based on what I've read in these posts!

Yeah, it's effectively blurring the shadow pixels.

As far as I can see, you have three options if you want to totally eliminate this...

1) Make all transparent pixels a mid/light grey (the defringe function can use a defined colour instead of averaging, it's just not plumbed in). This will give you a light'ish halo on any dark backgrounds though.

2) Reconfigure everyone's graphics hardware so it ignores the colour of transparent pixels when it filters. ;o)

3) Stop being so anal and don't worry about it as it'll probably be unnoticeable in game. ;op

lol, luckily I'm only scaling that image vertically so it'll be fine. The solution I really need is for the artist to supply proper pngs with the correct transparency and it'll be fine. Another artist supplied a load that were totally fine.