Wierd "Blurring" with SFML.

[crazy2be]

When i try to display images to the screen on my "Menubar" at the bottom of the screen, they end up very garbled and messy looking.

The image on the left is what comes out when i display it onscreen, the image on the right is what *should* come out. (it is a "X" with a transparent background and a black border. The transparency has been replaced with the menu color for the purposes of this post). Note that the image has been scaled to 8x so that you can see what is happening easier.

Any idea why this is happening? If you want to take a look at the code, you can get it from the "opentower" sourceforge project (there is way too much to post here, although the relevant code would all be in /game). I'm guessing it's something to do with the view being set weirdly?

[dabo]

Have you tried setting smooth to false?

Code: [Select]

your_image.SetSmooth(false);

[crazy2be]

That fixes it... why was the "smoothing" making it look really bad?
I've disabled smoothing for now, because it makes the images look really bad, but is there any way to disable smoothing only if the image is at it's regular size? (so that images are smoothed when drawn at smaller and larger sizes than normal, but not otherwise)

[Tank]

Images are smoothed, not sprites. Therefore images are always at their regular size.

[nitram_cero]

I think that the artifacts you see (besides the "smoothing") are due to a border on the image (e.g. a white border)

Try leaving an extra 1 pixel border that matches the colors of the real border (in your case, black), so the interpolation is correctly achieved by OpenGL.
To get the appropiate subpicture (without the border 1 pixel "new border") use Sprite's SetSubRect()

You may understand it better from a graphic that I posted in another thread (the thread is about something related to what I'm telling you): http://www.sfml-dev.org/forum/viewtopic.php?t=1224

Hope this helps.
-Martín

[crazy2be]

Well, i turned of the smoothing for the icons (i don't want smoothing anyway, since they won't be resized), but is there a similar option for text?

Is what i get for output when i display a series of pipe characters (|) on the screen. I would like to disable any blurring of the font, especially if it is uneven like in the picture. Is there any way to do this?

[Laurent]

No, because the rendered glyphs are too crappy without bilinear filtering

Are you using a custom view? Did you resize your window?

[nitram_cero]

Smoothing is for texturizing, but if the view is not the default, or you're not using integer numbers for positions (for example)... that's what happens.

OpenGL will do smoothing anyway, but not because of texture-to-polygon coordinates but because the polygon itself is not aligned to the pixels of the screen (i.e. the sprite's position has decimals)

Well... I'm just guessing that :3

[crazy2be]

Well, as far as i know, i am using a view equal to the size of the window. Here is my code that handles the sf::Resized event:

Code: [Select]

if (Event.Type == sf::Event::Resized) {
    // Resize the game view
    Gfx::View.SetHalfSize(Event.Size.Width/(2*Gfx::CurrentZoom),
    Event.Size.Height/(2*Gfx::CurrentZoom));
    // Resize and center the "Normal" view (toolbars and menus are drawn on this one, including the toolbar that has the problem images/text drawn on it)
    Gfx::NormalView.SetHalfSize(Event.Size.Width/2, (Event.Size.Height)/2);
    Gfx::NormalView.SetCenter(Event.Size.Width/2, (Event.Size.Height)/2);
    // Resize the menu at the bottom
    BottomMenu.OnResize();
}
Is there some other was i should be doing it to make the width/height as it should be? I really like SFML (It's fast and really quite nice to use ), but i hate this problem, and i hope there is a way to fix it.

[Laurent]

Your code should be ok. If you give me a minimal and complete code that reproduces the problem, I can see if there's anything to do about it.

[nitram_cero]

Is there a window size in which this doesn't happen to you?

Even if you use a view of the size of the window, this could mean that the metrics are 2 units per 3 pixels or something like that, forcing that anti-aliasing.
The view makes a projection in respect to the viewport, that in turn is the size of the window. So if you resize to make everything fit in, you might get that behaviour as texels (rendered image pixels) can get to be between two screen pixels.

Try window sizes that are power-of-two divisions of your window size.
If you're using 800x600, try 400x300, 200x150... and see if this still happens.

I hope this helps

EDIT: You could also try to disable all kinds of antialiasing/anisotropic filtering with opengl hints.
Or leaving a border (transparent) for each glyph.

Regards
-Martín

[crazy2be]

Here is some example code that reproduces the problem (for me). The problem seems to get much worse with smaller fonts (and large fonts actually look ok).

What are opengl hints, and how can i disable them?

Could is be that my graphics card has bad anti aliasing? (is this handled directly by the graphics card these days?)

Thank you for your interest in helping me!

Code: [Select]

#include <SFML/Graphics.hpp>
#include <iostream>
#include <string>

int main() {
    sf::String ExampleText("||||||||||||||||||||||||||||||||||||||||||||\n"
                           "____________________________________________\n"
                           "--------------------------------------------\n"
                           "::::::::::::::::::::::::::::::::::::::::::::\n"
                           "The quick brown fox jumped over the lazy dog");
    ExampleText.SetSize(12);
    sf::RenderWindow App(sf::VideoMode(800, 600, 32), "Example");
    bool Running = true;
    App.SetFramerateLimit(30);
    while (Running) {
        sf::Event Event;
        while (App.GetEvent(Event)) {
            if (Event.Type == sf::Event::Resized) {
                sf::View View;
                View = App.GetView();
                View.SetHalfSize(Event.Size.Width/2, Event.Size.Height/2);
                View.SetCenter(Event.Size.Width/2, Event.Size.Height/2);
                std::cout << "Width: " << Event.Size.Width << "\tHeight: " << Event.Size.Height << '\n';
                App.SetView(View);
            } else if (Event.Type == sf::Event::Closed) {
                App.Close();
                Running = false;
            }
        }
        App.Clear();
        App.Draw(ExampleText);
        App.Display();
    }
}

[nitram_cero]

Hints: http://www.opengl.org/documentation/specs/man_pages/hardcopy/GL/html/gl/hint.html

Sorry for the confusion. I thought that glHint could change the full screen antialiasing but apparently it's just for points, lines, etc.

It's unlikely to be your graphics card. I can't try that right now, but I'll recheck this thread later.

Doing another game I've seen that smoothing on "rendered text" can be weird.
Maybe the character separation makes some glyphs to be not-pixel-aligned doing those strange artifacts.


It would be nice to have "SetSmooth(false)" for sf::Strings for this matter.
EDIT: You can try this, I haven't but will.

Code: [Select]

const_cast<Image &>(GetDefaultFont().GetImage()).SetSmooth(false);

Regards
-Martín

[Laurent]

It would be nice to have "SetSmooth(false)" for sf::Strings for this matter

Well, I already answered this question a few messages above
Disabling filtering for fonts is worse in any case.

[nitram_cero]

Skipped that, sorry.

It's not if you're making a pixelated game (Where smoothed fonts look bad).