Artifacts on the edges of sprites
Posted: Thu Jun 05, 2014 4:07 pm
There are numerous artifacts in the game that are rather easy to fix actually. These artifacts appear on the border of some tree sprites:
And I've heard reports of similar artifacts on some character UI borders as well.
What I think is the reason of it(very long explanation, i have no idea why i have decided to write it. you can skip if you're not interested):
Every object you draw on screen consists of pixels, pixel is a point on your screen and number of pixels is determined by your screen resolution. 1280x1024 or something like that. Every texture consists of points called texels. For example most of our textures containt 128x128 texels. In older games they used to draw objects in a manner when 1 texture texel is mappen exactly in a position of screen pixel. It's easy and fast but you cannot rotate or scale such objects. These graphics were mostly used in 2d snes and like games like mario and final fantasy I-VI. Modern 2d games and 3d all support object scaling and rotation so sometimes(actually almost always) screen pixel hits a space between texture texels so to determine its color interpolation is used.
Interpolation is a process of finding a color of a point that's between texels. Every point on image has 4 neighbouring texels and color is interpolated using color of those texels. But there are points that have only 2 neighbours and they are on the edges. There are also points with 1 neighbour in the corners but no one cares about those.
But to interpolate you still need to know 4 texels. So texture coordinate wrapping comes into play. Tou can either think that your texture is tiled(copied over and over) or it's continued with the same color as the border. DG always uses tiling no matter if the actual texture is tiled or not.
It's ok if the image does not have non-transparent texels near the edge. But it's no ok if there are some(that tree does have non-transparent texels near the edge). So if some edge has non-transparent texels opposite edge will be non-transparent after interpolation as well. And the most important problem is that different channels of color(r, g, b, a) are interpolated separately so result color after interpolating between transparent and non-transparent texels may be seemingly random. Like if you interpolate pixels around white opaque object with color (1, 1, 1, 1) with transparent background (1, 0, 0, 0) result color will be something like (1, 0.5, 0.5, 0.5) which's actually pink. So your white object will have a pink outline which looks weird. that's why bottom edge is white.
Example of problematic texture:
Sample code DG currently uses for textures looks like it(i think it does):
It makes texture coords >1 be repeated over and over. So basically bottom of any texture gets connected to its top and those artifacts can appear. I suggest trying using clamped texture coords for any sprite that does need tiling. Most regular sprites are like this:
Also please notice that while most game objects don't need tiling textures, there are some that do. So I suggest adding a property to every object like texture_repeat that should be true by default and loading every texture according to its value.
And I've heard reports of similar artifacts on some character UI borders as well.
What I think is the reason of it(very long explanation, i have no idea why i have decided to write it. you can skip if you're not interested):
Every object you draw on screen consists of pixels, pixel is a point on your screen and number of pixels is determined by your screen resolution. 1280x1024 or something like that. Every texture consists of points called texels. For example most of our textures containt 128x128 texels. In older games they used to draw objects in a manner when 1 texture texel is mappen exactly in a position of screen pixel. It's easy and fast but you cannot rotate or scale such objects. These graphics were mostly used in 2d snes and like games like mario and final fantasy I-VI. Modern 2d games and 3d all support object scaling and rotation so sometimes(actually almost always) screen pixel hits a space between texture texels so to determine its color interpolation is used.
Interpolation is a process of finding a color of a point that's between texels. Every point on image has 4 neighbouring texels and color is interpolated using color of those texels. But there are points that have only 2 neighbours and they are on the edges. There are also points with 1 neighbour in the corners but no one cares about those.
But to interpolate you still need to know 4 texels. So texture coordinate wrapping comes into play. Tou can either think that your texture is tiled(copied over and over) or it's continued with the same color as the border. DG always uses tiling no matter if the actual texture is tiled or not.
It's ok if the image does not have non-transparent texels near the edge. But it's no ok if there are some(that tree does have non-transparent texels near the edge). So if some edge has non-transparent texels opposite edge will be non-transparent after interpolation as well. And the most important problem is that different channels of color(r, g, b, a) are interpolated separately so result color after interpolating between transparent and non-transparent texels may be seemingly random. Like if you interpolate pixels around white opaque object with color (1, 1, 1, 1) with transparent background (1, 0, 0, 0) result color will be something like (1, 0.5, 0.5, 0.5) which's actually pink. So your white object will have a pink outline which looks weird. that's why bottom edge is white.
Example of problematic texture:
Sample code DG currently uses for textures looks like it(i think it does):
Code: Select all
glGenTextures(1, &textureId);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
Code: Select all
glGenTextures(1, &textureId);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
