Transparent pixels also have png's feelings or artifacts with transparency.
Let's talk about 2D games. Regardless of the platform on which they are developed, they will almost always use 3D accelerators to render 2D sprites (iOS, Android, PC ... even Flash already learns to do this).
And everything will be fine until you want to scale your picture. And then you will find that before this perfectly joined tiles will acquire seams, and incomprehensible lines will appear at the edges of the sprites.
')
You will try to overlap the tiles, but the seams will still remain ... And you will start puzzling.
And it's all in the ill-starred transparent pixels! It turns out they have color too.
In order to understand why this happens, you need to understand how the GPU scales the textures. He does it not quite the way graphite editors do it. And the point here is transparency.
This is understandable, it is excusable for 3D games and local textures, but it will cause artifacts if you have a situation on the sprites when a completely opaque pixel is adjacent to a fully transparent one (which is very likely to appear in pixel art etc.).
Suppose we have a picture of a blue square where the bug condition is present - opaque pixels are adjacent to fully transparent:
This image consists of two channels - the color channel (RGB) and the alpha channel (transparency). The problem is that fully transparent pixels still have some meaning in the color channel. And what exactly this value will be - is known only to the software that compressed PNG. In fact, these colors can be any.
In the situation with the image above, you can easily get this picture:
Those. transparent pixels will be white. But since they are completely transparent - we will never see it and everything will be ok.
Now let's see how a video card scales textures with transparency.
To simplify this case, it scales the color channel separately and the alpha channel separately. For example, when scaling the above texture by 80% (the bug will appear on any scale), we get the following picture:
See you
The GPU mixed the borderline blue pixels with those that are beyond the border of transparency (since it scaled the color channel separately from the alpha and it didn’t matter whether they were transparent or not). As a result, the border pixels mixed with white and acquired a completely incomprehensible color.
Obviously, if you try to defuse such a sprite, we will clearly see the seams.
And, I think, it is obvious why sprites are spared from such artifacts, the border of which gradually descends into transparency, and does not jump sharply from 1 to 0.
Now that we know what's the matter, we know how to deal with it. We need the transparent pixels adjacent to the borders to have a color similar to the border. Moreover, if we reduce the sprite's scale by more than 2 times, then we need to take care of the “edging” of an image several pixels wide. But how to do that?
The easiest way I found is to create a second layer in Photoshop, put it under the main layer, blur it with blur and set the transparency to 1%. As a result, the pixels around our image will be almost invisible (1% transparency), but it is guaranteed to have a color similar to the border. Of course, the blur effect is not suitable for every sprite. Somewhere it is possible to create 4 such (1%) layers, but not to blur them, but simply to move in different directions ...
In general, I hope someone this information will be useful.
And everything will be fine until you want to scale your picture. And then you will find that before this perfectly joined tiles will acquire seams, and incomprehensible lines will appear at the edges of the sprites.
')
You will try to overlap the tiles, but the seams will still remain ... And you will start puzzling.
And it's all in the ill-starred transparent pixels! It turns out they have color too.
In order to understand why this happens, you need to understand how the GPU scales the textures. He does it not quite the way graphite editors do it. And the point here is transparency.
This is understandable, it is excusable for 3D games and local textures, but it will cause artifacts if you have a situation on the sprites when a completely opaque pixel is adjacent to a fully transparent one (which is very likely to appear in pixel art etc.).
About transparency and PNG.
Suppose we have a picture of a blue square where the bug condition is present - opaque pixels are adjacent to fully transparent:
This image consists of two channels - the color channel (RGB) and the alpha channel (transparency). The problem is that fully transparent pixels still have some meaning in the color channel. And what exactly this value will be - is known only to the software that compressed PNG. In fact, these colors can be any.
In the situation with the image above, you can easily get this picture:
Those. transparent pixels will be white. But since they are completely transparent - we will never see it and everything will be ok.
Transparency, GPU and scaling.
Now let's see how a video card scales textures with transparency.
To simplify this case, it scales the color channel separately and the alpha channel separately. For example, when scaling the above texture by 80% (the bug will appear on any scale), we get the following picture:
See you
The GPU mixed the borderline blue pixels with those that are beyond the border of transparency (since it scaled the color channel separately from the alpha and it didn’t matter whether they were transparent or not). As a result, the border pixels mixed with white and acquired a completely incomprehensible color.
Obviously, if you try to defuse such a sprite, we will clearly see the seams.
And, I think, it is obvious why sprites are spared from such artifacts, the border of which gradually descends into transparency, and does not jump sharply from 1 to 0.
How to fight?
Now that we know what's the matter, we know how to deal with it. We need the transparent pixels adjacent to the borders to have a color similar to the border. Moreover, if we reduce the sprite's scale by more than 2 times, then we need to take care of the “edging” of an image several pixels wide. But how to do that?
The easiest way I found is to create a second layer in Photoshop, put it under the main layer, blur it with blur and set the transparency to 1%. As a result, the pixels around our image will be almost invisible (1% transparency), but it is guaranteed to have a color similar to the border. Of course, the blur effect is not suitable for every sprite. Somewhere it is possible to create 4 such (1%) layers, but not to blur them, but simply to move in different directions ...
In general, I hope someone this information will be useful.
Source: https://habr.com/ru/post/147165/
All Articles