17 replies to this topic

[riuthamus]

What would cause this issue?

[Hodgman]

What do the 4 channels of your grass texture look like?

It looks as if the 'transparent' areas have RGB of White, which is pulled in by bilinear filtering and mip-mapping.

[JTippetts]

Filtering from the background color of the texture as it is down-sampled, most likely. With these things, it is best if you use a background color that is very near to the color of the solid region, rather than some color like white or black.

[riuthamus]

well... here ill give you a more in depth view of what i have.

btw... i looked up some stuff on google and they say i need some SuperPNG plugin to export stuff out of photoshop. Sounds so odd to me....

Attached Thumbnails

• 

[Ashaman73]

Try to use pre-multiplied alpha or expand the color on the RGB channels, don't use white as filler for green grass.

[riuthamus]

you know, telanor linked me that, and i asked him, what does that mean for me.... as the art guy?

and I have tried to use the Alpha 1 channel in photoshop with a green background for the base thing and it doesnt seem to work.

Edited by riuthamus, 01 October 2012 - 11:11 PM.

[Ashaman73]

I don't own photoshop, so either there's a plugin or an option when exporting your texture to a given file format or you need to do it by hand which isn't hard.

In the latter case just add an new layer which contains the alpha channel of your texture as greyscale image without alpha. Then set the layer to multiply. Now the image, when alpha is turned off, should be black where the alpha is 0, that's all.

PS: you need to change the blending in your game engine.

Edited by Ashaman73, 01 October 2012 - 11:17 PM.

[riuthamus]

Uploading a video of my process, you guys can tell me what you think it would be very much appreciated.

Edited by riuthamus, 01 October 2012 - 11:54 PM.

[Ashaman73]

Does your engine already support pre-multiplied alpha ? This would explain the bright borders, in this case you really need to multiply your RGB image with an additional RGB layer where each channel equals the alpha channel of your source image.

In photoshop do the following
1. You start with source image =(Rs,Gs,Bs,As)
2. Add new layer on top of it with (As,As,As,white)
3. Set layer to multiply.

Edited by Ashaman73, 02 October 2012 - 12:52 AM.

[NxLeaf]

which platform and API are you using. D3D.OPENGL etc.
have you opened the alpha test mode. and closed the alpha blend mode.
the when the bttmap tried to sample the value of a pixel. it will regard the value of you pic 's background.
especially your pic's background is whrite. and ou set it as alpha 0.
but when you tried to access it when your alpha blend mode is closed. you will get this result.

[NxLeaf]

and my email: boyue@rocketmail.com
if you have any problem to discuss with.
i wanna to be the vonenteer.

[Kaptein]

i have to amend, if i may, that photoshop is bad for spriting
it makes simple things complicated because its built for non-pixel artwork
try graphics gale for example
and yes, the alpha channel of your textures should be _green_ because the outline of your sprite is green!
when spriting you need fast access to alpha channel to be effective, and this can of course be done in photoshop
its just very very inconvinient..

[Hodgman]

and I have tried to use the Alpha 1 channel in photoshop with a green background for the base thing and it doesnt seem to work.

By default Photoshop has pretty screwy support for PNG files.

There's two ways of working with transparency in Photoshop.
1) This is the way you're currently working. You've only got 3 channels (RGB), but photoshop allows pixels to also be semi-transparent (magically) -- it does this without exposing a separate transparency channel. This is normally fine when working on web-pages, etc, but is very bad for games.
The reason is that in games, your image will be loaded into an RGBA texture, and the RGB values of invisible pixels are still very important! e.g. they are used during mip-mapping.
In this mode, Photoshop doesn't care about the colour values of invisible pixels, because it assumes that they'll never be used, but in games they are used. It seems that Photoshop is writing out "white" for transparent pixels with your texture, which is very bad...

2) The alternative is to ensure your background layer is opaque, and to use a new "Alpha 1" to encode transparency. I can convert your file to this mode by ctrl+clicking "layer 0" (select visible pixels), go to channels tab, click 'Save selection as channel'. Then I can add a background layer and fill it with a sensible background color.
However, as you've noticed, Photoshop's default PNG plugin is too stupid to respect this mode, and ignores your alpha channel when saving. You can fix this by deleting png.8bi (may want to keep a backup!) and replacing it with a better one (I forget which one I used to use, but yes I've had to delete png.8bi in the past and replace it with a better version. I assume this is why someone suggested you use SuperPNG -- it allows you to properly save your alpha channel).
Also, because Photoshop+PNG is a bit unreliable in this way, you should never use PNG as a working format (i.e. never open one for editing) but should only use it as an export/final format.

[edit]An alternative is to simply not use PNG files -- in my current game, I use TGA files, which the tool-chain compiles into DXT-compressed files for the game's use[/edit]

Once you've fixed your processes so that you can save PNG files that have 'coloured' transparent pixels, you've got two more choices:
A) Design your image to be drawn with "traditional alpha blending", by ensuring that transparent pixels have the same colour as their closest opaque pixel. In your case, you can do this by adding a green background layer, though in the general case you have to use a process called 'dilation'.
B) Design your image to be drawn with "premultiplied alpha blending", by ensuring that transparent pixels are black. You can do this by adding a black background layer.
These two options look like:


On the code side, if you choose (A), your graphics programmer needs to use the blend mode of src=SrcAlpha, dst=InvSrcAlpha or if you choose (B) they need to use the blend mode of src=One, dst=InvSrcAlpha.
Both are valid choices. Traditionally (A) is more popular, but I personally prefer (B) because it's simpler and is also compatible with DXT1 compression.

Edited by Hodgman, 02 October 2012 - 05:45 AM.

[riuthamus]

interesting, I more or less knew option A, tried it and it didnt work in game. ( suggesting that our code end is doing something wrong ) I did not know how photoshop was saving out png's though and that is some seriously good information to know.

[Wilson Guerrero]

take a look to this tutorial:



just ignore the part related to UDK and focus in the creation of the alpha channel in photoshop, not in a million years I would figure out this very explicit and efective way to make an alpha channel.

The initial problem in the video looks close to your problem.

Cheers.

[riuthamus]

So, i have tried the setup that Hodgeman suggested and it ends up that it works! although it has a small issue.



Anyway, thanks for the help so far, here is what it looks like from afar, keep in mind that this is by no means the final version of what this will look like:



Lastly, i plan to try the method that you linked Wilson and see if that removes the issues associated the the slightly rough edges.

[Wyrframe]

That "small issue" is happening because you haven't sorted your transparent objects to be drawn from back to front. You're drawing the one in the foreground first, and even though it's transparent there, it's still nonzero alpha, and so it makes writes to the z-buffer. When the one behind it is drawn, it is not drawn "overtop" of the nearer geometry.

While I'm mentioning it, opaque objects (those with no alpha whatsoever) should be sorted to draw from front to back, to take advantage of Z-occlusion, instead of being repeatedly overdrawn and wasting shader cycles.

[riuthamus]

Ah, okay well thank you very much. What a joy this place is some times!