dodgy PNG edge

BlitzMax Forums/BlitzMax Programming/dodgy PNG edge

Raz(Posted 2006) [#1]
I have FILTEREDIMAGE set as default and its not just this image it happens on. Im up to date gfx driver/directx wise.

this is an image showing the transparency of a PNG I am using...


but this is what happens when I draw it


all images x/y positions are stored as float and the above happens with varying amounts of strength which I am assuming is to do with whatever screen_x and screen_y positions im at (also floats)

anyone had similar? ta!


Grey Alien(Posted 2006) [#2]
yep. The problem is that colour data of black is being stored with the transparent pixels. There may be an option in your art package to not save colour data with transparent pixels or some such. I was given art for my current game that had the same problem and I made a topic about it on the forum (can't find it at the moment).

I couldn't get the artist to see what the problem was (I didn't have the same software so couldn't explain it properly) and then someone recommended an app made by a forum member called Defringe that removes the colour data from the transparent edges. It works brilliantly. Try a search on defringe in the Max forums...


(tu) ENAY(Posted 2006) [#3]
Possible reasons:-

- Image is not square (ie, 64x64, 128x128)
This may have distorted your png when it has been resized

> the above happens with varying amounts of strength

Try

DrawImage YourImageHandle, Int(Pos_x), Int(Pos_y)


Raz(Posted 2006) [#4]
cheers you two :)

defringe worked perfectly, thanks! :D


(tu) ENAY(Posted 2006) [#5]
Don't thank me, after reading Grey's post, my reply was clearly wrong :) Of course it's pixel blackening, it's the exact outline of your image! I should've looked a bit harder.


Raz(Posted 2006) [#6]
granted Grey's solution sorted it, but I appreciated the fact you replied anyway ;)


sswift(Posted 2006) [#7]
Chris:
Which paint program are you using to export these to PNG? Photoshop 7 has the same problem but it changes the alpha pixels to white so you get white fringes.


Grey Alien(Posted 2006) [#8]
Chris-M: you are welcome. The funny thing is I was getting black outlines on text sent to me by the artist and he was using photoshop too (don't know version number), not white ones.


Yan(Posted 2006) [#9]
@Chris-M - Don't mention it...Oh, you didn't... ;op


Raz(Posted 2006) [#10]
SSwift: PSP10 (which I have to admit is pretty damn good) though I didn't even consider it might be the paint package being used, I think I got the same effect with Photoshop.

I defringed all of the PNG's but Im still getting it for one of them, think I need to play a bit more.


Yan(Posted 2006) [#11]
I defringed all of the PNG's but Im still getting it for one of them, think I need to play a bit more.
If you'd like to send me the image, I'll see if there are any tweaks I can make.


Grey Alien(Posted 2006) [#12]
the defringe is wicked, but if say you have a thin shadow along the edge of a graphic it may not 100% remove the crap I found, but still improves it loads. Wish I could find a link to that other thread...


Raz(Posted 2006) [#13]
Yan: thanks (oh and sorry, i didnt realise you made it!) :) the image is...

the effect is most noticable around the bottom right section of the dark border round the hole.
ta!


Grey Alien(Posted 2006) [#14]
can you show it in action with the problem too? I bet it's cos you've got black pixel data stored and it's under the "light" bit and defringe will have missed that cos it only does edges...maybe.


Raz(Posted 2006) [#15]



Perturbatio(Posted 2006) [#16]
swift: http://www.devarticles.com/c/a/Photoshop/20-Things-About-Photoshop-You-Have-to-Know/6/


sswift(Posted 2006) [#17]
Perturb:
Uh, that defringe is for a totally different issue than this one. :-)

That is for like, if you cut a character out of a background and you need to color the pixels around the edge that you missed a color which is closer to that of the image in that area.


Grey Alien(Posted 2006) [#18]
yeah that's an art error dude.


Yan(Posted 2006) [#19]
Don't worry about my sardonic sense of humour Chris, I don't mean anything by it. :o)

Yeah, GA's right, there's not much that DeFringe can do for that image, I'm afraid. The 'highlights' you're seeing are an unavoidable result of filtering. The dark opaque edge of the 'hole' is being blended with the translucent white of the 'light beam' which gives an opaque white(ish) line that sticks out like a sore thumb.


I'd try the following:

1) If the image isn't going to be scaled or rotated, disable the filtering for it. You will lose the lovely sub pixel movement though.

2) Spilt the image up into two and draw the 'hole' and 'light beam' separately.


Grey Alien(Posted 2006) [#20]
so there's nothing he can do in his art package to remove the black colour info on transparent pixels or anything?


sswift(Posted 2006) [#21]
I think I see the problem.

Look very carefully at the image blended with the blitz background.

It looks like there is a white halo around the lower edge of the hole.

This continues into the lighted area.

Chris:
Did you apply any kind of a sharpening filter to this image? Those will create highlighted edges. What you have here is an art issue. The hole image which you drew the light beam over has a very light highlight with alpha on the lower right edge, and that is what you're seeing in Max.

Just make a brown layer below the hole in photoshop and you'll be able to see it clear as day just like you can in Max.


Yan(Posted 2006) [#22]
so there's nothing he can do in his art package to remove the black colour info on transparent pixels or anything?
I'm talking about the 'hole image' specifically. This is a slightly different situation as the pixels causing the trouble aren't entirely transparent and so can't just be recoloured (well they can, but they'd look crap ;o)).

@SSwift - I'm afraid it's not that simple. The highlight/halo only appears when the image is scaled, rotated or drawn at a non whole number boundary (if filtering is enabled) and I'm pretty sure it's a result of the process I've described above.

Try this...
Load the image into your art package of choice and add a dark background layer
...No highlight/halo...
Now re-sample the image using a bilinear filter (any 'averaging' filter should do it) to about 75%.
...Tada!...
This is what's happening in BMax.

[edit]
Just for the hell of it, try this...
Strict

Local image:TImage = LoadImage(LoadBank("http::www.evildrbin.com/chris/ROCK_HOLE.png"), FILTEREDIMAGE)
Assert image Else "Oops..."

Graphics 800, 600, 32

Local x#, y#

SetBlend ALPHABLEND
'SetScale 0.75, 0.75
'SetRotation 10
SetClsColor 41, 29, 28
Repeat
	If KeyHit(KEY_LEFT) Then x# :- 0.1
	If KeyHit(KEY_RIGHT) Then x# :+ 0.1
	If KeyHit(KEY_UP) Then y# :- 0.1
	If KeyHit(KEY_DOWN) Then y# :+ 0.1
	
	Cls
	DrawImage image, x#, y#
	
	Flip
Until KeyHit(KEY_ESCAPE)

End
[/edit]


(tu) ENAY(Posted 2006) [#23]
Remove the hills and draw some grass instead! :)


Raz(Posted 2006) [#24]
cool thanks yall, ill give it another look :)


sswift(Posted 2006) [#25]
Yan:
I see... I understand the issue now.

The pixels in the light beam are pure white, and this pure white color is normally at 25% transparency, and blended with a brown background at that level.

But when the image is scaled, you have white pixels being blended with the brown pixels, and you end up with pixels that have a lot of white but their opacity is such that they're not blending with the background to produce the same result as the 25% white pixels in the pure beam.

There's two ways to fix this.

The first way is to change the 3D hardware so it blends the images differently. :-)

The second way which is actually possible is to blend the white layer seperately from the image of the hole. So make the light beam a seperate image with no brown. That will solve the problem.


Grey Alien(Posted 2006) [#26]
sswift: yeah Yan already said that ;-)