PNG files always have significant white "border
by Jerald Metz · in Technical Issues · 11/09/2006 (3:25 pm) · 10 replies
I am evaluating TGB to see if it will server my purposes.
I have run into a rather frustrating problem. I expect the resolution is simple, and was hoping someone could help.
I have created a PNG file of a ball. I am saving it from Photoshop 5.5 with transparency as a PNG-24. When I bring the image into Torque Game Builder, it looks exactly as I wish, however if I attempt to use the image as a scroller, I always get a large white space outside of the image.
Here is an example screenshot:
I cannot, for the life of me, figure out how to resolve the issue.
Any help would be greatly appreciated. Thanks!
I have run into a rather frustrating problem. I expect the resolution is simple, and was hoping someone could help.
I have created a PNG file of a ball. I am saving it from Photoshop 5.5 with transparency as a PNG-24. When I bring the image into Torque Game Builder, it looks exactly as I wish, however if I attempt to use the image as a scroller, I always get a large white space outside of the image.
Here is an example screenshot:
I cannot, for the life of me, figure out how to resolve the issue.
Any help would be greatly appreciated. Thanks!
#2
I have had problems in the past exporting images using this method.
is this the built in photoshop method or the super png plugin?
I am not sure if it is related. but ps breaks alot of png stuff.
have you tried any other editors / exporters to see if you can isolate the problem to ps?
I would try to recreate this issue using gimp or something
if this produces same results as ps, then it is prolly indeed a bug.
11/09/2006 (4:49 pm)
Hmm, I have had problems in the past exporting images using this method.
is this the built in photoshop method or the super png plugin?
I am not sure if it is related. but ps breaks alot of png stuff.
have you tried any other editors / exporters to see if you can isolate the problem to ps?
I would try to recreate this issue using gimp or something
if this produces same results as ps, then it is prolly indeed a bug.
#3
e.g. 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096)
11/09/2006 (5:01 pm)
Just make the seamless image file 512x512 and the white space is gone. (Power-of-two e.g. 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096)
#4
The other thing that might help is to turn the filtering of when you bring your images into tgb
:)
11/15/2006 (8:09 pm)
Ive had similar problems rendering antialiased 2d sprites using Rhino 3d with Flamingo, resolved issue by rendering as png with alpha but making sure any environmental background be set as black. This fixed the prob for me, I notice if the environment is set to white, the alpha renders with a border and this comes thru as the white border when importing into TGB.The other thing that might help is to turn the filtering of when you bring your images into tgb
:)
#5
For the white space issue if making a it a power of 2 (or whatever it's called :), I'd try extending the edges out to fill the white area. This means your transparency area is larger. Not sure what that will do to the scroller or TGB...
Good Luck :)
*Spelling etc.
11/16/2006 (3:16 am)
I would recommend setting Photoshops turning OFF the background colour completely - no black or white - and export your images over the transparent background (seen as a grid of squares). From there, you should have no problem.For the white space issue if making a it a power of 2 (or whatever it's called :), I'd try extending the edges out to fill the white area. This means your transparency area is larger. Not sure what that will do to the scroller or TGB...
Good Luck :)
*Spelling etc.
#6
I'm curious to know if it was a format issue or a power of two issue.
11/16/2006 (4:28 am)
Was this problem resolved?I'm curious to know if it was a format issue or a power of two issue.
#7
11/16/2006 (6:57 am)
I was having same problem until I did the power of 2. I normally use 256 x 256 and 512 x 512.
#8
In any case, this allows me to continue with my eval.
Thanks to everyone for the help!
11/16/2006 (2:50 pm)
I wanted to give you all an update. Changing the image size to reflect powers of 2 has resolved the problem, though I still don't quite understand why.In any case, this allows me to continue with my eval.
Thanks to everyone for the help!
#9
The white or black borders are caused by anti-aliasing the edges. It's like a sampling or smoothing that blends the inside color with the background colors along the edge or transition from inside to background. If you didn't have an alpha channel for that transparency mask you'd be expecting that transition because it does improve the appearance of the graphics. But of course the moment we slap an opacity mask over it we have to deal with the fact that while the opacity is fading from inside to the outer background, it is not the only thing that does so. The colors also do, and depending on the background color in use when you have it in the 3D scene, you'll notice it.
Sometimes you'll hear recommendations for using black as the background. That may help, but it's got the potential of darkening the edges especially when viewed against a light (e.g. white and sky-blue and cloiudy) background. We're less sensitive to that darkening as it fades to transparent however, than to brightening, so using black seems to work for most. We also recommend using a black or dark background when painting tall grass with alpha-enabled particle brushes in PD Particles. If you know the grass is going to be weeks in an undersea scene with a tint of blue then you might even give the background a similarly slight blueish tone to match it even batter.
There are some techniques available to work on images, and especially their alpha, after the fact. If you've painted, for example, an awesome piece of shrubbery, and see that white border, you could
1. invert the alpha, then
2. Clear selection to black, then
3. invert alpha again
The effect of this is that the transparent parts become opaque or selected. The inner opaque parts become transparent or de-selected. Then you clear to black the new temporary selection. What used to be a white (transparent) background is turning black, and the edges that have a hint of white are getting a hint of dark.
It is modulated by the alpha channel's selection mask, and you might consider trying it more than once (step 2, the clear to black thing).
Some tools have options for 'premultiplied alpha'. PD Pro does. Many 3D tools have. What happens there is that the alpha channel's opacity mask is modified to bring in a faster transition from opaque (visible) to transparent. You may end up not seeing the whiteish crud.
Other approaches might be to adjust the alpha's value and contrast, or to shrink the alpha. PD Pro has tools for that.
Incidentally, we just released the demo version of PD Pro 4. www.thebest3d.com/dogwaffle/demozone
If you're interested, try PD Particles first (available here at GG) and ping me for a sidegrade discount coupon
01/17/2007 (8:09 am)
That's interesting, that using powers-of-2 in the dimensions fixed it. The white or black borders are caused by anti-aliasing the edges. It's like a sampling or smoothing that blends the inside color with the background colors along the edge or transition from inside to background. If you didn't have an alpha channel for that transparency mask you'd be expecting that transition because it does improve the appearance of the graphics. But of course the moment we slap an opacity mask over it we have to deal with the fact that while the opacity is fading from inside to the outer background, it is not the only thing that does so. The colors also do, and depending on the background color in use when you have it in the 3D scene, you'll notice it.
Sometimes you'll hear recommendations for using black as the background. That may help, but it's got the potential of darkening the edges especially when viewed against a light (e.g. white and sky-blue and cloiudy) background. We're less sensitive to that darkening as it fades to transparent however, than to brightening, so using black seems to work for most. We also recommend using a black or dark background when painting tall grass with alpha-enabled particle brushes in PD Particles. If you know the grass is going to be weeks in an undersea scene with a tint of blue then you might even give the background a similarly slight blueish tone to match it even batter.
There are some techniques available to work on images, and especially their alpha, after the fact. If you've painted, for example, an awesome piece of shrubbery, and see that white border, you could
1. invert the alpha, then
2. Clear selection to black, then
3. invert alpha again
The effect of this is that the transparent parts become opaque or selected. The inner opaque parts become transparent or de-selected. Then you clear to black the new temporary selection. What used to be a white (transparent) background is turning black, and the edges that have a hint of white are getting a hint of dark.
It is modulated by the alpha channel's selection mask, and you might consider trying it more than once (step 2, the clear to black thing).
Some tools have options for 'premultiplied alpha'. PD Pro does. Many 3D tools have. What happens there is that the alpha channel's opacity mask is modified to bring in a faster transition from opaque (visible) to transparent. You may end up not seeing the whiteish crud.
Other approaches might be to adjust the alpha's value and contrast, or to shrink the alpha. PD Pro has tools for that.
Incidentally, we just released the demo version of PD Pro 4. www.thebest3d.com/dogwaffle/demozone
If you're interested, try PD Particles first (available here at GG) and ping me for a sidegrade discount coupon
#10
01/23/2007 (1:44 pm)
Cool. You got a PNG into Torque. I'd love to find out how to do that. 
Torque 3D Owner James Bond