artifacts with 128px tile maps

[GuidoBisocoli]

I've migrated my code from tmxLoader to tmxLite and I'm having some artifacts when scrolling my map in game, sometimes some lines appear like this:

I'm using the SFML3Example but I think the problem is not there, from what I understand. This does not happen with 64px maps. I was considering recreating my map as a 64px map but maybe this is trivial to solve and also can help others.

EDIT: this is my code, it's a simple VS2022 project just to test this issue

#include "tmxLoader.h" // this is the SFML3Example

#include "SFML/Graphics.hpp"
#include "SFML/Graphics/Color.hpp"
#include "SFML/System.hpp"
#include <SFML/Window/Event.hpp>
#include <SFML/Window/Keyboard.hpp>

int main()
{
sf::RenderWindow window;
window.create(sf::VideoMode(sf::Vector2u(1680, 1050)), "SFML window");

tmx::Map map;
map.load("assets/practice.tmx"); // 128px map made in Tiled!

MapLayer layerZero(map, 0);
MapLayer layerOne(map, 1);
MapLayer layerTwo(map, 2);

sf::View view;
view.setSize({ 1680*2, 1050*2});
view.setCenter(sf::Vector2f(840.f, 525.f));
sf::Vector2f pos = view.getCenter();

sf::Clock globalClock;
sf::Time elapsed;

while (window.isOpen())
{
    elapsed = globalClock.restart();
    layerZero.update(elapsed);
    layerOne.update(elapsed);
    layerTwo.update(elapsed);

    while (const std::optional event = window.pollEvent())
    {
        if (event->is<sf::Event::Closed>())
            window.close();

        else if (const auto* keyPressed = event->getIf<sf::Event::KeyPressed>())
        {
            if (keyPressed->scancode == sf::Keyboard::Scancode::W)
                pos.y -= 2600.f * elapsed.asSeconds();
            if (keyPressed->scancode == sf::Keyboard::Scancode::A)
                pos.x -= 2600.f * elapsed.asSeconds();
            if (keyPressed->scancode == sf::Keyboard::Scancode::S)
                pos.y += 2600.f * elapsed.asSeconds();
            if (keyPressed->scancode == sf::Keyboard::Scancode::D)
                pos.x += 2600.f * elapsed.asSeconds();
        }
    }

    view.setCenter({ pos.x, pos.y });

    window.setView(view);

    window.clear(sf::Color::Blue);
    window.draw(layerZero);
    window.draw(layerOne);
    window.draw(layerTwo);

    window.display();
}

}

[fallahn]

This is a common occurrence with tilemaps, caused by rounding error. There are a variety of work-arounds, usually starting by rounding camera/sprite positions to the nearest pixel. There are more advanced techniques such as this which involves rendering a sub-section of the map to a buffer before moving/scaling the output. A quick search on the SFML forums also returns a lot of suggestions (I'd include a link but apparently you can't link to search results on the forum).

[ldornbusch]

I usually encountered this bug, when transparent tiles are neighboring solid tiles. Make sure that all solid tiles are surrounded by other solid tiles. This was the easiest fix for me to avoid this problem.

[GuidoBisocoli]

Thanks for your answers. Ok, so it's a common issue, I was thinking it could be a pixel perfect issue but since I only have the problem with 128px and not with 64px I discarded that option. I'm going to see what I do to fix it, thanks for the suggestions.

I usually encountered this bug, when transparent tiles are neighboring solid tiles. Make sure that all solid tiles are surrounded by other solid tiles. This was the easiest fix for me to avoid this problem.

All my tiles are solid in my tmx files so that's not the issue, thanks anyway.

[GuidoBisocoli]

I went through the code of tmxLoader since it didn't have those issues and ported it to SFML3.0, but I doesn't draw some tiles because I'm not converting the Quads to triangles correctly. Then I saw the correction that's done in tmxLoader to avoid artifacts and I tried to apply that to tmxLite, I found the code and but again I can't apply it correctly. Some code:

TmxLoader - LayerSet::Draw - This is the wrong conversion from Quads to Triangles

	...
if(!m_visible) return;

	std::vector<sf::Vertex> triangles;
	for (int i = 0; i < 6; i++) triangles.push_back(sf::Vertex());

	for(auto x = m_visiblePatchStart.x; x <= m_visiblePatchEnd.x; ++x)
	{
		for(auto y = m_visiblePatchStart.y; y <= m_visiblePatchEnd.y; ++y)
		{
			auto index = y * m_patchCount.x + x;
			if(index < m_patches.size() && !m_patches[index].empty())
			{
				states.texture = &m_texture;

				// convert Quad to 2 Triangles

				/*
				0 -- 1           0 -- 1
				|    |  becomes  |  / |
				|    |           | /  |
				3 -- 2           3 -- 2
				*/

                                /// PROBLEM: this only draws some tiles (one every 8 or so) I guess there are more quads to convert ?
				triangles[0] = m_patches[index][0];
				triangles[1] = m_patches[index][1];
				triangles[2] = m_patches[index][3];

				triangles[3] = m_patches[index][1];
				triangles[4] = m_patches[index][2];
				triangles[5] = m_patches[index][3];


				rt.draw(m_patches[index].data(), static_cast<unsigned>(m_patches[index].size()), sf::PrimitiveType::Triangles, states);
				//rt.draw(m_patches[index].data(), static_cast<unsigned>(m_patches[index].size()), sf::PrimitiveType::Quads, states);
			}
		}
	}
}

TmxLoader - MapLoader::AddTileToLayer - Correction to avoid artifacts

...
	//update the layer's tile set(s)
    sf::Vertex v0, v1, v2, v3;

	//applying half pixel trick avoids artifacting when scrolling
	v0.texCoords = m_tileInfo[gid].Coords[0] + sf::Vector2f(0.5f, 0.5f);
	v1.texCoords = m_tileInfo[gid].Coords[1] + sf::Vector2f(-0.5f, 0.5f);
	v2.texCoords = m_tileInfo[gid].Coords[2] + sf::Vector2f(-0.5f, -0.5f);
	v3.texCoords = m_tileInfo[gid].Coords[3] + sf::Vector2f(0.5f, -0.5f);
...

TmxLite - MapLayer::generateTiles - I Can't apply the same correction to the triangles

...
                            auto idIndex = m_chunkTileIDs[idx].ID - ca->m_firstGID;
                            sf::Vector2f tileIndex(sf::Vector2i(idIndex % ca->tsTileCount.x, idIndex / ca->tsTileCount.x));
                            tileIndex.x *= ca->tileSetSize.x;
                            tileIndex.y *= ca->tileSetSize.y;
                            /*
                            a -- b
                            |  / |
                            | /  |
                            d -- c
                            */

                            /// PROBLEM: I tried adding the +/-0.5f to tileIndex but I can't figure out which offset to set, positive or negative to which vertex
                            Tile tile =
                            {
                                sf::Vertex{tileOffset - getPosition(), m_chunkColors[idx], tileIndex},
                                sf::Vertex{tileOffset - getPosition() + sf::Vector2f(static_cast<float>(ca->tileSetSize.x), 0.f), m_chunkColors[idx], tileIndex + sf::Vector2f(static_cast<float>(ca->tileSetSize.x), 0.f)},
                                sf::Vertex{tileOffset - getPosition() + sf::Vector2f(sf::Vector2u(ca->tileSetSize.x, ca->tileSetSize.y)), m_chunkColors[idx], tileIndex + sf::Vector2f(sf::Vector2u(ca->tileSetSize.x, ca->tileSetSize.y))},
                                sf::Vertex{tileOffset - getPosition(), m_chunkColors[idx], tileIndex},
                                sf::Vertex{tileOffset - getPosition() + sf::Vector2f(sf::Vector2u(ca->tileSetSize.x, ca->tileSetSize.y)), m_chunkColors[idx], tileIndex + sf::Vector2f(sf::Vector2u(ca->tileSetSize.x, ca->tileSetSize.y))},
                                sf::Vertex{tileOffset - getPosition() + sf::Vector2f(0.f,static_cast<float>(ca->tileSetSize.y)), m_chunkColors[idx], tileIndex + sf::Vector2f(0.f, static_cast<float>(ca->tileSetSize.y))}
                            };

                            doFlips(m_chunkTileIDs[idx].flipFlags, &tile[0].texCoords, &tile[1].texCoords, &tile[2].texCoords, &tile[3].texCoords, &tile[4].texCoords, &tile[5].texCoords);
                            ca->addTile(tile);
...

Do you have any ideas? I would like to add the correction to tmxLite (that could be added to the main tmxLite code also) but fixing tmxLoader works for me too.

[fallahn]

To be honest I've never used SFML 3, the example renderer was ported by a contributor. I don't think there's a one size fits all solution - it depends entirely on your project (plus the included example is just that, an example).

Personally I'd start with only loading the map with tmxlite, then create a custom renderer for the project at hand - perhaps by using a RenderTexture slightly larger than the screen area (eg rounded to a multiple of 128, or whatever your tile size is) and rendering to it (pixel aligned) only the tiles visible on screen. Getting tile grid coords from the screen is pretty easy, all you need is your view position and view size, and it doubles as fast tile culling. Then use the RenderTexture with a Sprite to draw it on screen, and apply any sub-pixel offsets there, to get smooth scrolling.