SFML community forums

Help => Graphics => Topic started by: OxySocks on May 24, 2014, 12:39:12 pm

Title: SFML Tile Map Tearing
Post by: OxySocks on May 24, 2014, 12:39:12 pm

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 (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)

(http://i.imgur.com/0rf6Z8k.png)

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 (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

Title: Re: SFML Tile Map Tearing
Post by: dabbertorres on May 24, 2014, 01:13:55 pm

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

Title: Re: SFML Tile Map Tearing
Post by: OxySocks on May 24, 2014, 02:26:40 pm

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);

Title: Re: SFML Tile Map Tearing
Post by: BaneTrapper on May 26, 2014, 05:01:26 am

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.

Title: Re: SFML Tile Map Tearing
Post by: OxySocks on May 26, 2014, 10:17:05 pm

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.

Quote from: BaneTrapper on May 26, 2014, 05:01:26 am

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?

Title: Re: SFML Tile Map Tearing
Post by: OxySocks on May 28, 2014, 11:47:28 pm

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

Title: Re: SFML Tile Map Tearing
Post by: Nexus on May 29, 2014, 12:12:25 am

Have you read this (https://github.com/SFML/SFML/blob/master/include/SFML/Graphics/Transformable.hpp#L415-L425)?

Title: Re: SFML Tile Map Tearing
Post by: OxySocks on May 29, 2014, 03:41:06 pm

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.

Title: Re: SFML Tile Map Tearing
Post by: Nexus on May 29, 2014, 04:02:13 pm

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.

Title: Re: SFML Tile Map Tearing
Post by: OxySocks on May 30, 2014, 03:57:18 pm

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.

Title: Re: SFML Tile Map Tearing
Post by: Nexus on May 30, 2014, 04:42:57 pm

Quote from: OxySocks on May 30, 2014, 03:57:18 pm

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.

Quote from: OxySocks on May 30, 2014, 03:57:18 pm

Would it be possible to post the entire solution?

No.

Quote from: OxySocks on May 30, 2014, 03:57:18 pm

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.

Title: Re: SFML Tile Map Tearing
Post by: OxySocks on May 30, 2014, 07:01:54 pm

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! :)

Title: Re: SFML Tile Map Tearing
Post by: MaxxNiNo on April 21, 2020, 05:55:04 am

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 (https://github.com/UxiBeo/Game_SFML/blob/OOP/GameSFML/Graphics.cpp)