[SOLVED] Strange distortion bug when zooming with a sf::View

[netrick]

A KISS solution would be just not to use zoom in pixel-art game and leave it for 3D games. It depends on the game design though.

[Nexus]

A KISS solution would be just not to use zoom in pixel-art game and leave it for 3D games.

Not using the SFML view zooming functionality "for simplicity" is very questionable, I'm sure Octav has his reasons why he needs this feature. There are many use cases even for 2D games.

[netrick]

Yes, but zooming causes graphical glitches in pixel art. He wants to solve it and I just say that not using zoom is the simplest solution - sometimes we forget that we can remove a problematic feature and do great without it.

[G.]

I wouldn't call "don't zoom" a solution to "how to avoid distortion when using zoom?".

[Octav]

You guys are saying this is normal, but just look at this image.



I want to release a game to a wider audience. Those are horizontal pixels. And no matter what I zoom, it stays distorted, we have tried the smallest scales possible. I have tried everything. There has to be a cause to this, because this is horrible. I spend hours on artwork, and to see it look like this in-game is so terrible :/

[FRex]

How are you drawing that? VertexArrays? Sprites? Something else?

[Octav]

How are you drawing that? VertexArrays? Sprites? Something else?

VertexArray. Also we tried setSmooth() but it doesn't help much. It still keeps some very ugly distorsion, it just messes it up even more.

void MapLayer::ConstructMap()
{
        mapVertices.clear();

        int index = 0;
        int index_y = 0;

        for(auto&& i : tileData)
        {
                for(auto&& j : i)
                {
                                //====================================================================\\
                                // Figure showing the quad order. Important.                          \\
                                //====================================================================\\
                                //  (up_l_point)    (up_r_point)       |                              \\
                                //        +-----------+                |        (1)    (2)            \\
                                //        |           |                |          +----+              \\
                                //        |           |                |          |    |              \\
                                //        |           |                |          +----+              \\
                                //        |           |                |        (4)    (3)            \\
                                //        +-----------+                |                              \\
                                // (down_l_point)     (down_r_point)   |    Order of the points       \\
                                //====================================================================\\

                                // Declare 4 points of the quad
                                sf::Vertex up_l_point;
                                sf::Vertex up_r_point;
                                sf::Vertex down_r_point;
                                sf::Vertex down_l_point;

                                // Set their positions
                                up_l_point.position =   sf::Vector2f((float)(index*tile_size), (float)(index_y*tile_size));
                                up_r_point.position =   sf::Vector2f((float)(index*tile_size + tile_size), (float)(index_y*tile_size));
                                down_r_point.position = sf::Vector2f((float)(index*tile_size + tile_size), (float)(index_y*tile_size + tile_size));
                                down_l_point.position = sf::Vector2f((float)(index*tile_size), (float)(index_y*tile_size + tile_size));

                                 // Set their texture bounding box
                up_l_point.texCoords =   sf::Vector2f((j%tiles_per_row) * tile_size +0.5f, (j/tiles_per_row) * tile_size +0.5f);
                up_r_point.texCoords =   sf::Vector2f((j%tiles_per_row * tile_size) + tile_size-0.5f, (j/tiles_per_row) * tile_size+0.5f);
                down_r_point.texCoords = sf::Vector2f((j%tiles_per_row) * tile_size + tile_size-0.5f, (j/tiles_per_row * tile_size) + tile_size-0.5f);
                down_l_point.texCoords = sf::Vector2f((j%tiles_per_row) * tile_size +0.5f, (j/tiles_per_row * tile_size) + tile_size-0.5f);

                                mapVertices.append(up_l_point);
                                mapVertices.append(up_r_point);
                                mapVertices.append(down_r_point);
                                mapVertices.append(down_l_point);

                                index++;
                }
                index = 0;
                index_y++;
        }
}

[FRex]

Did you try adding and subtracting 0.5 to the positions like you do to textures so that positions too end with 0.5 and tile is tile_size-1.f wide and high?

[Octav]

Did you try adding and subtracting 0.5 to the positions like you do to textures so that positions too end with 0.5 and tile is tile_size-1.f wide and high?

Yes, I tried that as well, and the tile_size is 32x32

[FRex]

I mean like this so that it'd create 1:1 mapping between coordinates and texture pixels:

// Set their positions
                up_l_point.position =   sf::Vector2f((float)(index*tile_size) + 0.5f, (float)(index_y*tile_size)+0.5f);
                up_r_point.position =   sf::Vector2f((float)(index*tile_size + tile_size)-0.5f, (float)(index_y*tile_size)+0.5f);
                down_r_point.position = sf::Vector2f((float)(index*tile_size + tile_size)-0.5f, (float)(index_y*tile_size + tile_size)-0.5f);
                down_l_point.position = sf::Vector2f((float)(index*tile_size)+0.5f, (float)(index_y*tile_size + tile_size)-0.5f);

[Octav]

I mean like this so that it'd create 1:1 mapping between coordinates and texture pixels:

// Set their positions
                up_l_point.position =   sf::Vector2f((float)(index*tile_size) + 0.5f, (float)(index_y*tile_size)+0.5f);
                up_r_point.position =   sf::Vector2f((float)(index*tile_size + tile_size)-0.5f, (float)(index_y*tile_size)+0.5f);
                down_r_point.position = sf::Vector2f((float)(index*tile_size + tile_size)-0.5f, (float)(index_y*tile_size + tile_size)-0.5f);
                down_l_point.position = sf::Vector2f((float)(index*tile_size)+0.5f, (float)(index_y*tile_size + tile_size)-0.5f);

That seems to produce a better result, however, it also creates a border between the tiles.

[FRex]

 
What about removing all 0.5fs from both textures and positions?

[Octav]

What about removing all 0.5fs from both textures and positions?

Nope. Still horrible distorsion. Here's the code for my zooming:

if(sf::Keyboard::isKeyPressed(sf::Keyboard::F5) && zoomTimer < 0) {camera.zoom(0.9f); zoomTimer = 0.02f;}
   if(sf::Keyboard::isKeyPressed(sf::Keyboard::F6) && zoomTimer < 0) {camera.zoom(1.1f); zoomTimer = 0.02f;}

[FRex]

If it renders good with no zoom you could try to render it to a texture that has default view without zooms before drawing it to window with zoomed view, have you tried that?

[Octav]

If it renders good with no zoom you could try to render it to a texture that has default view without zooms before drawing it to window with zoomed view, have you tried that?

I don't quite understand this, however even without a zoom you can notice some strange graphical bugs