Pure black causes flickering when moving view?

[Carlitox]

I was using pure black to draw tiles, i had problems with flickering and discovered that some tiles were flickering and other not (pure black ones). Then i changed the color and make it clearer and solved the issue.

My position and origins are all integers. The camera movement is in integer value.

In my laptop there is no problem with this color but in my Pc the problem exists.

[Hapax]

Scaled?

Would be helpful if you provided some code.
See here 

[Carlitox]

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

class Map : public sf::Drawable, sf::Transformable
{
public:
        Map() { tileset_texture.loadFromFile("tilesets/tileset_01.png"); loadTileMap(); }
        void loadTileMap();

        virtual void draw(sf::RenderTarget& target, sf::RenderStates states) const
        {
               
                states.transform *= getTransform();
                states.texture = &tileset_texture;
                target.draw(tilemap, states);
               
        }

private:
        sf::VertexArray tilemap;
        sf::Texture tileset_texture;
        sf::RenderTexture render_texture;
        sf::RenderStates states;
};

void Map::loadTileMap()
{

        std::vector<int> tiles = { 1, 2, 3, 4, 8, 3, 3, 3, 4, 3, 1, 1,1, 1 ,1, 2, 2, 2, 2, 2,
                1, 2, 135, 135, 135, 135, 3, 3, 4, 3, 4, 1,1, 1 ,1, 2, 2, 2, 2, 2,
                1, 2, 198, 199, 200, 3, 3, 3, 4, 3, 4, 1,1, 1 ,1, 2, 2, 2, 2, 2,
                1, 2, 277, 278, 277, 278, 3, 3, 4, 3, 4, 1,1, 1 ,1, 2, 2, 2, 2, 2,
                1, 2, 3, 4, 3, 3, 3, 3, 4, 3, 4, 3,3, 3 ,3, 2, 2, 2, 2, 2,
                1, 2, 3, 4, 3, 3, 3, 3, 4, 3, 4, 3,3, 3 ,3, 2, 2, 2, 2, 2,
                10, 10, 10, 10, 10, 3, 3, 3, 4, 3, 4, 1,1, 1 ,1, 2, 2, 2, 2, 2,
                1, 2, 6, 6, 6, 6, 3, 3, 4, 3, 4, 1,1, 1 ,1, 2, 2, 2, 2, 2,
                1, 67, 67, 67, 67, 3, 3, 3, 4, 3, 4, 1,1, 1 ,1, 2, 2, 2, 2, 2,
                1, 2, 11, 11, 11, 11, 3, 3, 4, 3, 4, 1,1, 1 ,1, 2, 2, 2, 2, 2,
                1, 2, 3, 4, 3, 3, 3, 3, 4, 3, 4, 1,1, 1 ,1, 2, 2, 2, 2, 2,
                1, 2, 3, 4, 3, 3, 3, 3, 4, 3, 4, 1,1, 1 ,1, 2, 2, 2, 2, 2 };


        unsigned int width = 21;
        unsigned int height = 12;

        sf::Vector2u tileSize(16, 16);

        tilemap.setPrimitiveType(sf::Quads);
        tilemap.resize(width * height * 4); // Each tile have 4 vertex

        for (unsigned int i = 0; i < width; ++i)
                for (unsigned int j = 0; j < height; ++j)
                {
                        // get the current tile number
                        int tileNumber = tiles[i + j * width];

                        // find its position in the tileset texture
                        int tu = tileNumber % (tileset_texture.getSize().x / 16);
                        int tv = tileNumber / (tileset_texture.getSize().x / 16);

                        // get a pointer to the current tile's quad
                        sf::Vertex* quad = &tilemap[(i + j * width) * 4];

                        // define its 4 corners
                        quad[0].position = sf::Vector2f(i * tileSize.x, j * tileSize.y);
                        quad[1].position = sf::Vector2f((i + 1) * tileSize.x, j * tileSize.y);
                        quad[2].position = sf::Vector2f((i + 1) * tileSize.x, (j + 1) * tileSize.y);
                        quad[3].position = sf::Vector2f(i * tileSize.x, (j + 1) * tileSize.y);

                        // define its 4 texture coordinates
                        quad[0].texCoords = sf::Vector2f(tu * tileSize.x, tv * tileSize.y);
                        quad[1].texCoords = sf::Vector2f((tu + 1) * tileSize.x, tv * tileSize.y);
                        quad[2].texCoords = sf::Vector2f((tu + 1) * tileSize.x, (tv + 1) * tileSize.y);
                        quad[3].texCoords = sf::Vector2f(tu * tileSize.x, (tv + 1) * tileSize.y);
                }

}


class Level
{
public:
        Level() { rectangle.setFillColor(sf::Color::Blue); rectangle.setSize(sf::Vector2f(30, 30));  }
        void render(sf::RenderWindow &c_window) { c_window.draw(map); c_window.draw(rectangle); }
       


private:
        sf::RectangleShape rectangle;
        Map map;
       
};


class GameApp
{

public:

        GameApp() : window(sf::VideoMode(800, 600), "SFML Graphic test", sf::Style::Fullscreen) { window.setVerticalSyncEnabled(true); view.setSize(200, 150); view.setCenter(100, 75); window.setView(view); }
        sf::Clock clock;
        sf::Time frame_time;

        void run()
        {
                while (!sf::Keyboard::isKeyPressed(sf::Keyboard::Escape))
                {
                        frame_time = clock.restart();
                        frame_time += clock.getElapsedTime();

                        while (frame_time.asSeconds() < 1.f / FPS)
                        {
                                frame_time += clock.getElapsedTime();
                               
       
                        }

                        if(sf::Keyboard::isKeyPressed(sf::Keyboard::Right)) view.move(1, 0);
                        else if (sf::Keyboard::isKeyPressed(sf::Keyboard::Left)) view.move(-1, 0);
                        else if (sf::Keyboard::isKeyPressed(sf::Keyboard::Up)) view.move(0, -1);
                        else if (sf::Keyboard::isKeyPressed(sf::Keyboard::Down)) view.move(0, 1);

                        window.setView(view);  
                        render();
                }
        }

        void render() { window.clear(); level.render(window); window.display(); }

private:
        sf::RenderWindow window;
        Level level;
        sf::View view;
        const float FPS = 60.f;

};

int main()
{
        GameApp game_app;
        game_app.run();

        return 0;
}
 

Another issue is that my pc screen works at 30 hz interlazed by default and only looks ok when changing to 50 or 60hz not interlazed. The game run at 60Hz. I thought that this was managed by sfml.  Other games works in all frequencies.

¿I will need another library to detect the frecuencies of the screen and change it?

[Hapax]

SFML doesn't manage v-sync. It can request that your graphic card does but after that, it's up to the card.

Not sure why you're looping to lock the maximum framerate. Firstly, you have vertical sync active (if graphic card activates it) so this is working in contrary to that. If v-sync is active, your frame rate is locked to the display's refresh rate so there's no need to delay your code. Secondly, if you don't use vertical sync, you could easily set a target maximum framerate with SFML:
window.setFramerateLimit(30);
Note: don't use vertical sync and framerate limit at the same time.

If you use v sync, don't delay your code; you want it to go as fast as it can per cycle (between frame updates).

tl;dr: SFML controls framerate limit; graphic card controls vertical sync.

[Carlitox]

Thank you, didn't know that. I quit the framerate checking and i keep with vsync activated.

I can see the view movement without flickering checking the best fullscreenmode and adapting the view dividing by an integer value. In my case the best screen size is 1920 x 1080 and the view is divided by 6: 320 x 180. It moves with a little ralentization each 20 seconds more or less. For me it's not acceptable that ralentization for a minimum example.

If I have to use different screen sizes, that makes imposible to fit the view to a multiple integer values in order to avoid artifacts. In other computer the best screen mode is 1366 x 768 then the 320 x 180 view causes artifacts.

I don't know how to make the game playable in different computers.


PD: The code is compiled with full optimization with Visual studio creating a release version.

[Hapax]

Just be aware that if the user's graphic card refuses v-sync, which users can often switch off manually, the framerate will run at full speed. You might consider wanting to "fix your timestep"; this works with or without v-sync and with or without framerate limit.

If you view size is the screen size divided by six exactly, sticking to integer values will round to every six pixels. You could probably multiply the value by six before rounding and then divide it. This should round to the nearest pixel, if that's what you're looking for.

The gap artifacts in tile maps can be alleviated by pre-rendering the map to a render texture at a size to match the texture pixels and then draw that map transformed.

If you would like a simple way to do all of this stuff, you could use an external tile map drawable, such as Selba Ward's Tile Map. I guess it could be considered a shameless promotion but it was only created to help others (and myself!) to draw tile maps without having to remake the code every time so feel free to check it out.

I have absolutely no idea whatsoever what "ralentization" means.

[Carlitox]

Ralentization it's slowdown in spanglish. 

[Carlitox]

I've used your library for TileMap and using smoothscroll it solves the flickering but the slowdowns are there in both computers i'm using.

[Hapax]

I'm glad you found TileMap to be helpful

By "slowdown", is it possible that you could be referring to a "stuttery" movement?
For example, in , at around 1:05 (and other times), you can see that the movement isn't perfectly smooth. If you look at the window's title bar, you can see that when it says "Interpolating" there, it no longers stutters. This is the "final touch" part of "Fix Your Timestep and may be quite difficult to grasp at first so keep trying! However, if you would rather just skip that part and be able to use it, you can use my Kairos timing library. It has a Timestep class, which can help a lot; the example in the video linked above is also there.

[Carlitox]

Yes it's stuttering. I'll take a look to Kairos. Thanks.