SFML Tile Map Tearing

[OxySocks]

Greetings,

As many others here I've recently started developing a small game in my spare time.
I have a decent amount of experience with c++ and feel comfortable enough to take this next step,
including school courses I have around 20 weeks of experience using raw OpenGL (1.1 & 3.2+) as well.

I started by making a small tile map, according to the tutorial found here:
http://www.sfml-dev.org/tutorials/2.1/graphics-vertex-array.php

This tutorial is extremely self explanatory and I didn't have any issues getting it up and running.
After some messing with view (I want to be able to scale my map up and down) I have been getting issues;
Tile tearing occurs and I'm left with something like this:

Image: Tile map 'tearing' occuring.

(click to show/hide)

I did some research (Yes I really did!) and I found a really promising solution here:
http://en.sfml-dev.org/forums/index.php?topic=6665.0

But the offsetting by 0.0075 just doesn't seem to work. (It does feel like it's getting closer)
I tried flooring some of the values while building the Vertex Array but to no avail.
The linked post doesn't seem to exist anymore, which is a shame since it might give me some clarity on the subject.

The important parts of the code are the following:

Building the Vertex Array:

(click to show/hide)

void TileMap::buildVertexArray() {
   vertices.setPrimitiveType(sf::Quads);
   vertices.resize(tileLayers.size() * widthInTiles * heightInTiles * 4);

   for (TileLayer tileLayer : tileLayers) {
      if (tileLayer.isCollisionLayer) {
         continue; // Don't draw the collision layer
      }

      for (unsigned int widthIndex = 0; widthIndex < widthInTiles; widthIndex++) {
         for (unsigned int heightIndex = 0; heightIndex < heightInTiles; heightIndex++) {
            int tileNumber = tileLayer.layerTiles[widthIndex + heightIndex * widthInTiles].tile;

            if (tileNumber < 0) {
               continue; // Empty tile
            }

            int tx = tileNumber % (tileset.getSize().x / tileWidth);
            int ty = tileNumber / (tileset.getSize().x / tileWidth);

            sf::Vertex* quad = &vertices[(widthIndex + heightIndex * widthInTiles) * 4];

            // define its 4 corners
            quad[0].position = sf::Vector2f(widthIndex * tileWidth, heightIndex * tileHeight);
            quad[1].position = sf::Vector2f((widthIndex + 1) * tileWidth, heightIndex * tileHeight);
            quad[2].position = sf::Vector2f((widthIndex + 1) * tileWidth, (heightIndex + 1) * tileHeight);
            quad[3].position = sf::Vector2f(widthIndex * tileWidth, (heightIndex + 1) * tileHeight);

            // define its 4 texture coordinates
            quad[0].texCoords = sf::Vector2f(tx * tileWidth, ty * tileHeight);
            quad[1].texCoords = sf::Vector2f((tx + 1) * tileWidth, ty * tileHeight - 0.0075);
            quad[2].texCoords = sf::Vector2f((tx + 1) * tileWidth - 0.0075, (ty + 1) * tileHeight - 0.0075);
            quad[3].texCoords = sf::Vector2f(tx * tileWidth - 0.0075, (ty + 1) * tileHeight);
         }
      }
   }
}

Drawing the Tile Map:

(click to show/hide)

void TileMap::draw(sf::RenderTarget& target, sf::RenderStates states) const {
   states.transform *= getTransform();
   states.texture = &tileset;
   target.draw(vertices, states);
}
 

Drawing the 'Game':

(click to show/hide)

sf::View playerView = sf::View(player.getPosition(), sf::Vector2f(640, 360));

   while (window.isOpen())
   {
      sf::Event event;
      while (window.pollEvent(event))
      {
         if (event.type == sf::Event::Closed) {
            window.close();
         }
      }

      sf::Time elapsed = clock.restart();
      player.update(elapsed, &tileMap);

      window.clear(sf::Color(178, 255, 255));

      playerView.setCenter(player.getPosition());
      window.setView(playerView);

      window.draw(tileMap);

      window.draw(player);
      window.display();
   }

I'm really hoping you guys can help me out!

Thanks in advance for any pointers in the right direction.

Yours sincerely,
Oxy

[dabbertorres]

Wasn't the number 0.375? You may want to try that.

[OxySocks]

I think I've fixed it. The rounding error seemed to be in the view.setCenter().

The 'fixed' code is as follows:

Main.cpp

(click to show/hide)

window.clear(sf::Color(178, 255, 255));

playerView.setCenter(floor(player.getPosition().x), floor(player.getPosition().y));
window.setView(playerView);

[BaneTrapper]

From my personal experience that occurred when position was not rounded value.
Seeing you fixed it but you can still use std::floor(value) to get rounded down decimal value.

[OxySocks]

Seems like it isn't fully fixed; it just 'looks' like it works at specific resolutions/view sizes.

I've set the render window to 1920*1080 resolution. When I resize it to fullscreen (2560*1440) tearing occurs.
The difference is extremely small (it seems to be just 1 pixel) so this indeed seems like a rounding error.

From my personal experience that occurred when position was not rounded value.
Seeing you fixed it but you can still use std::floor(value) to get rounded down decimal value.

What do you mean exactly? I already round the position.x and position.y in the previous code snippet:

playerView.setCenter(floor(player.getPosition().x), floor(player.getPosition().y));

So, this question is open again! Any pointers?

[OxySocks]

Sorry guys, still haven't fixed it. Can anyone give me some guidance as to why this is happening?

[Nexus]

Have you read this?

[OxySocks]

I had not read that no, thanks for the resource!
However, I don't feel like I'm breaking any of those guidelines:

The object's position, origin and scale have no fractional part.
The TileMap is a VertexArray; I have tried flooring all of it's components but it's built from integers (like in the official tutorial).

The object's and the view's rotation are a multiple of 90 degrees.
No rotation so I think I'm pretty much fine here.

The view's center and size have no fractional part.
The views center is the players position, as you can see I have floored it (I have tried rounding it as well). The size is based on the size of the window (divided by 2) but I also floor/round this value just in case.

I'm obviously doing something wrong but I cant figure out what it is exactly.

[Nexus]

Can you get it to work with sprites instead of vertex arrays?

You should really try to reduce your code to a minimal example that can be written completely in a main() function. Just the simplest possible tile map and view, no game logic whatsoever. Use a single tile type and a fixed view. Make sure that while reducing, you can still reproduce the problem.

[OxySocks]

I might be able to get it working with sprites but I would rather not; the maps can get rather big.
Would it be possible to post the entire solution? I've already tried starting a clean version but I can't really reproduce the error in a very minimal environment.

[Nexus]

I might be able to get it working with sprites but I would rather not; the maps can get rather big.

I didn't mean you should do this in your own code, I was talking about finding the problem.

Would it be possible to post the entire solution?

No.

I've already tried starting a clean version but I can't really reproduce the error in a very minimal environment.

That's why I said "Make sure that while reducing, you can still reproduce the problem". If necessary, start with your original code, and omit more and more parts until you end up with a minimal complete example. It's possible that you already find the mistake in the process of reduction.

[OxySocks]

Thanks Nexus,

While minifying code I've tracked 99% of the tearing down to anti-aliasing. I only get very small vertical tears now while jumping, probably due to another significant rounding mistake. There is no tearing now while not moving. Do you have any explanation as to why this has such a drastic effect? I understand it's not absolutely necessary in my case due to the pixelart style of the application; but I didn't see any harm in using it anyway.

I have indeed made a small code sample: It's mostly based on the example given in the tutorial:

Main.cpp:

(click to show/hide)

#pragma once
#include <SFML/Graphics.hpp>
#include "TileMap.hpp"


int main()
{
        sf::ContextSettings contextSettings;
        contextSettings.antialiasingLevel = 8; //Toggling this has quite a drastic effect.
        sf::RenderWindow window(sf::VideoMode(1280, 720), "Tilemap", sf::Style::Default, contextSettings);

        const int level[] =
        {
                0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0,
                1, 1, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 3, 3,
                0, 1, 0, 0, 2, 0, 3, 3, 3, 0, 1, 1, 1, 0, 0, 0,
                0, 1, 1, 0, 3, 3, 3, 0, 0, 0, 1, 1, 1, 2, 0, 0,
                0, 0, 1, 0, 3, 0, 2, 2, 0, 0, 1, 1, 1, 1, 2, 0,
                2, 0, 1, 0, 3, 0, 2, 2, 2, 0, 1, 1, 1, 1, 1, 1,
                0, 0, 1, 0, 3, 2, 2, 2, 0, 0, 0, 0, 1, 1, 1, 1,
                0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0,
                1, 1, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 3, 3,
                0, 1, 0, 0, 2, 0, 3, 3, 3, 0, 1, 1, 1, 0, 0, 0,
                0, 1, 1, 0, 3, 3, 3, 0, 0, 0, 1, 1, 1, 2, 0, 0,
                0, 0, 1, 0, 3, 0, 2, 2, 0, 0, 1, 1, 1, 1, 2, 0,
                2, 0, 1, 0, 3, 0, 2, 2, 2, 0, 1, 1, 1, 1, 1, 1,
                0, 0, 1, 0, 3, 2, 2, 2, 0, 0, 0, 0, 1, 1, 1, 1,
                0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0,
                1, 1, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 3, 3,
                0, 1, 0, 0, 2, 0, 3, 3, 3, 0, 1, 1, 1, 0, 0, 0,
                0, 1, 1, 0, 3, 3, 3, 0, 0, 0, 1, 1, 1, 2, 0, 0,
                0, 0, 1, 0, 3, 0, 2, 2, 0, 0, 1, 1, 1, 1, 2, 0,
                2, 0, 1, 0, 3, 0, 2, 2, 2, 0, 1, 1, 1, 1, 1, 1,
                0, 0, 1, 0, 3, 2, 2, 2, 0, 0, 0, 0, 1, 1, 1, 1,
        };

        TileMap tilemap;
        if (!tilemap.load("tileset.png", sf::Vector2u(32, 32), level, 24, 16))
                return -1;

        while (window.isOpen())
        {
                sf::Event event;

                while (window.pollEvent(event))
                {
                        if (event.type == sf::Event::Closed) {
                                window.close();
                        }
                }

                window.clear(sf::Color(178, 255, 255));
                window.draw(tilemap);
                window.display();
        }

        return 0;
}

Tilemap.hpp:

(click to show/hide)

#pragma once
#include <SFML/Graphics.hpp>

class TileMap : public sf::Drawable, public sf::Transformable
{
public:

        bool load(const std::string& tileset, sf::Vector2u tileSize, const int* tiles, unsigned int width, unsigned int height)
        {
                // load the tileset texture
                if (!m_tileset.loadFromFile(tileset))
                        return false;

                // resize the vertex array to fit the level size
                m_vertices.setPrimitiveType(sf::Quads);
                m_vertices.resize(width * height * 4);

                // populate the vertex array, with one quad per tile
                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 % (m_tileset.getSize().x / tileSize.x);
                                int tv = tileNumber / (m_tileset.getSize().x / tileSize.x);

                                // get a pointer to the current tile's quad
                                sf::Vertex* quad = &m_vertices[(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);
                        }
                }

                return true;
        }

private:

        virtual void draw(sf::RenderTarget& target, sf::RenderStates states) const
        {
                // apply the transform
                states.transform *= getTransform();

                // apply the tileset texture
                states.texture = &m_tileset;

                // draw the vertex array
                target.draw(m_vertices, states);
        }

        sf::VertexArray m_vertices;
        sf::Texture m_tileset;
};

I've attached a small tileset for demonstration purposes. Commenting/uncommenting line 9 in Main.cpp shows some tearing (at least on my systems).

So again, thanks for all your help!

[MaxxNiNo]

The problem not in the Tile Map itself. It's in the Camera view. when Change the Camera position, just round x,y position, be for apply the change. My example:
https://github.com/UxiBeo/Game_SFML/blob/OOP/GameSFML/Graphics.cpp