ugly outline with overlapping sprites with smoothing on

[tiby312]

See that green outline where the turret sprite overlaps with the base of the tank? That doesn't look too pretty. How can I get rid of that outline without disabling smoothing?

Why do I want to keep smoothing on? Since this tank moves around a lot pretty slowly, it is not pretty having the sprites snapping to the nearest pixel all the time when I want a nice smooth movement. Basically it's just prettier with it on.

Using sfml 1.6

[Laurent]

It's simple, don't put green pixels around your tank in the original image

The best solution should be to use the same color as the border (dark gray).

[tiby312]

But there are no green pixels in the image. It's a transparent png image. I mean, if there were green pixels in the image, they would appear even with smoothing off.

[Laurent]

Well, I think that your transparent pixels are green (it's usually what people do to see them easily when transparency is not applied). Don't forget that transparency is encoded in the alpha channel of a pixel, red green and blue are still there and can have any value.

[tiby312]

Ah, yes thank you. I changed the colors of those pixels, and it is not as ugly.

But still, I feel like this only masks the problem as those extra pixels are still there making the border of the sprite bigger and blurrier. I could try to compensate by making the original sprite border thinner, but I cannot give it an opaque border as the edge would always be semi-transparent. Plus the areas that do not overlap do not have this problem so the border of the sprite would thicken and thin depending on how it moves on the sprite under it. Is there any way to get the sprite to display as it is, nothing more, nothing less all the time?

[Laurent]

Plus the areas that do not overlap do not have this problem

They do, but the green border is blended with blue, which makes it much less noticeable than with black.

Is there any way to get the sprite to display as it is, nothing more, nothing less all the time?

Yes. Pixel perfect rendering involves turning smoothing off. When you enable it, pixels are modified and this problem cannot be avoided. A solution would be to smooth RGB components but not the alpha channel -- but OpenGL doesn't offer this feature.

But maybe there's a better solution. You can try to add this code after the creation of the window:

Code: [Select]

glEnable(GL_ALPHA_TEST);
glAlphaFunc(GL_EQUAL, 1.f);
You must link your project with the OpenGL library (-lGL on Linux, opengl32.lib/a on Windows).

[tiby312]

A solution would be to smooth RGB components but not the alpha channel -- but OpenGL doesn't offer this feature.

This must be what I have been used to. The XNA game engine as well as the GameMaker engine and also HTML5 canvas must do it this way because I've used this same exact sprite with the invisible green pixels with those and had smooth sprites with no trouble. It would make sense because they don't use opengl.

Code: [Select]


glEnable(GL_ALPHA_TEST);
glAlphaFunc(GL_EQUAL, 1.f);


This appears to work very well if your sprite doesn't have any semi-transparent pixels, but it got rid of all of my semi-transparent pixels in my sprite, so I changed it to this:

Code: [Select]


glEnable(GL_ALPHA_TEST);
glAlphaFunc(GL_GREATER,0.39f);

I kept raising the limit until the outline was almost invisible. Looks pretty good now, but I feel dirty for using this messy solution and it's still not as perfect as possible, but I guess it's the best possible in opengl. Thanks for your patience and help!

[Laurent]

This must be what I have been used to. The XNA game engine as well as the GameMaker engine and almost HTML5 canvas must do it this way because I've used this same exact sprite with the invisible green pixels with those engines and had no trouble. It would make sense because neither use opengl.

OpenGL provides the same features as DirectX, they both give access to what graphics cards can do. So if the feature is available with XNA it must be available as well with OpenGL (I don't know what browsers use to implement HTML 5 rendering).

I'm curious about how XNA implements this feature.

This appears to work very well if your sprite doesn't have any semi-transparent pixels, but it got rid of all of my semi-transparent pixels in my sprite

Indeed, I forgot to tell you about that.

I kept raising the limit until the outline was almost invisible. Looks pretty good now, but I feel dirty for using this messy solution and it's still not as perfect as possible

I agree, it's not a solution but rather a quick and dirty workaround.