[TiledMapRenderer] Misalignment of tiles when using different tilesets of different cell sizes

[SilenceOfTheLambdas]

If you add tiles to a map (32x32 grid) from a tileset that uses a 32x32 grid, the map will render perfectly. But, if you then add some tiles to your map from a tileset that's a different size (i.e. 64x128), those tiles will be misaligned.

When using tiles only from tilesets that match the map's tile size (32x32) Game: Tiled Editor (How it should look):

When using tiles from a tileset that matches the map tile size, and some tiles from a tileset that does not match the map's tile size Game:

Tiled Editor (How it should look):

[lithiumtoast]

Interesting. Could you post the project with the files used for testing this?

[SilenceOfTheLambdas]

Interesting. Could you post the project with the files used for testing this?

Here is a link to the repo: https://github.com/sudo-make/Capstone-Project. You should just be able to import the project using Rider.

[lithiumtoast]

Reproduced. The problem is the position of the vertices when building the GPU memory from the tiled map's data.

[Uraxys]

Is there any update on this issue? Currently running into it myself now.

[lithiumtoast]

I believe the issue was resolved in offline communications.

@Uraxys could you send me a project with this issue? I'll take a look.

[Uraxys]

I believe the issue was resolved in offline communications.

@Uraxys could you send me a project with this issue? I'll take a look.

Here you go https://github.com/Uraxys/MonoGameDemo

Here is also a picture of how it should look compared to what it looks like in game. (In tiled) (In game)

[Uraxys]

Update: I was able to fix the issue by adding this line inside the CreateTileLayerModels method in the TiledMapModelBuilder class. It makes larger tiles "go" upwards instead of downwards, as that was my issue.

if (tileset.TileHeight > tileLayer.TileHeight) tilePosition.Y -= tileset.TileHeight - tileLayer.TileHeight;

No idea if this is the best solution, but wanted to share it incase it helps fix the issue.

[tigurx]

Update: I was able to fix the issue by adding this line inside the CreateTileLayerModels method in the TiledMapModelBuilder class. It makes larger tiles "go" upwards instead of downwards, as that was my issue.

if (tileset.TileHeight > tileLayer.TileHeight) position.Y -= tileset.TileHeight - tileLayer.TileHeight;

No idea if this is the best solution, but wanted to share it incase it helps fix the issue.

This fixed it for me also. I wasn't sure if it was the right solution though so I never submitted a PR.

private IEnumerable<TiledMapLayerModel> CreateTileLayerModels(TiledMap map, TiledMapTileLayer tileLayer)
{
    var layerModels = new List<TiledMapLayerModel>();
    var staticLayerBuilder = new TiledMapStaticLayerModelBuilder();
    var animatedLayerBuilder = new TiledMapAnimatedLayerModelBuilder();

    foreach (var tileset in map.Tilesets)
    {
        var firstGlobalIdentifier = map.GetTilesetFirstGlobalIdentifier(tileset);
        var lastGlobalIdentifier = tileset.TileCount + firstGlobalIdentifier - 1;
        var texture = tileset.Texture;

        foreach (var tile in tileLayer.Tiles.Where(t => firstGlobalIdentifier <= t.GlobalIdentifier && t.GlobalIdentifier <= lastGlobalIdentifier))
        {
            var tileGid = tile.GlobalIdentifier;
            var localTileIdentifier = tileGid - firstGlobalIdentifier;
            var position = GetTilePosition(map, tile);
            var sourceRectangle = tileset.GetTileRegion(localTileIdentifier);
            var flipFlags = tile.Flags;

            if (tileset.TileHeight > tileLayer.TileHeight) position.Y -= tileset.TileHeight - tileLayer.TileHeight;

            // animated tiles
            var tilesetTile = tileset.Tiles.FirstOrDefault(x => x.LocalTileIdentifier == localTileIdentifier);
            if (tilesetTile?.Texture is not null)
            {
                position.Y += map.TileHeight - sourceRectangle.Height;
                texture = tilesetTile.Texture;
            }

            if (tilesetTile is TiledMapTilesetAnimatedTile animatedTilesetTile)
            {
                animatedLayerBuilder.AddSprite(texture, position, sourceRectangle, flipFlags);
                animatedTilesetTile.CreateTextureRotations(tileset, flipFlags);
                animatedLayerBuilder.AnimatedTilesetTiles.Add(animatedTilesetTile);
                animatedLayerBuilder.AnimatedTilesetFlipFlags.Add(flipFlags);

                if (animatedLayerBuilder.IsFull)
                    layerModels.Add(animatedLayerBuilder.Build(_graphicsDevice, texture));
            }
            else
            {
                staticLayerBuilder.AddSprite(texture, position, sourceRectangle, flipFlags);

                if (staticLayerBuilder.IsFull)
                    layerModels.Add(staticLayerBuilder.Build(_graphicsDevice, texture));
            }
        }

        if (staticLayerBuilder.IsBuildable)
            layerModels.Add(staticLayerBuilder.Build(_graphicsDevice, texture));

        if (animatedLayerBuilder.IsBuildable)
            layerModels.Add(animatedLayerBuilder.Build(_graphicsDevice, texture));
    }

    return layerModels;
}

This was the line I had added as suggested by Uraxys if (tileset.TileHeight > tileLayer.TileHeight) position.Y -= tileset.TileHeight - tileLayer.TileHeight;