Monogame layers drawing over each other - why?

Question

I'm new to Monogame and C#. I'm attempting to render a test Tiled map on the screen using TiledSharp. However, when I try to draw multiple layers, they're clearly looping and drawing over one another.

Here's my draw method code:

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);



        // TODO: Add your drawing code here
        spriteBatch.Begin(sortMode: SpriteSortMode.FrontToBack, blendState: BlendState.AlphaBlend, samplerState: SamplerState.PointClamp, null, null, null,
            Matrix.CreateScale(6.0f)); 

        for (currentTileLayer=0; currentTileLayer < easyMap.TileLayers.Count; currentTileLayer++)


        {
            Console.WriteLine(easyMap.TileLayers[currentTileLayer].Name.ToString());


            for (var i = 0; i < easyMap.TileLayers[currentTileLayer].Tiles.Count; i++)
            {

                int gid = easyMap.TileLayers[currentTileLayer].Tiles[i].Gid;

                // empty tile, do nothing
                // gid => global id of tile
                if (gid == 0)
                {
                }
                else
                {
                    int tileFrame = gid - 1;
                    int column = tileFrame % tilesetTilesWide;
                    int row = (int)Math.Floor((double)tileFrame / (double)tilesetTilesWide);

                    float x = (i % easyMap.Width) * easyMap.TileWidth;
                    float y = (float)Math.Floor(i / (double)easyMap.Width) * easyMap.TileHeight;

                    Rectangle tileSetRec = new Rectangle(tileWidth * column, tileHeight * row, tileWidth, tileHeight);

                    spriteBatch.Draw(easyTileset, new Rectangle((int)x, (int)y, tileWidth, tileHeight), tileSetRec, Color.White);



                }



            }


        }


            spriteBatch.End();

        base.Draw(gameTime);

    }

My original map looks like this:

When I run the code it looks like this:

There are three layers to the map. How can I fix my loops? Thanks!

Answer 1

You should use sorted layers since Tiled supports them very well. Using layers gives you much more possibilies in terms of map design. I also enables to make you character hide behind objects and so on. In tiled, create your background layer first if needed several layers on top to avoid a wrong drawing order.

A simple solution could look like this

const int LAYER_BACKGROUNDLAYER = 0;
const int LAYER_FRONTLAYER = 1;
const int LAYER_TOPLAYER = 2;

Depending on how many layers you want to use.

Then you simply pass the layer number you want to draw to your Draw-Method. Usually from 0 to the max number.

public void DrawLayer(int layer)
{
    for (var j = 0; j < curMap.Layers[layer].Tiles.Count; j++)
    {
        int gid = curMap.Layers[layer].Tiles[j].Gid;

        if (gid == 0)
        { 
            //empty tile
        }
        else
        {
            //draw your tile
        }
    }
}

In this case "curMap" is you current .tmx file loaded via curMap = new TmxMap(mapSource); The draw code above should fit to your code since I've based it on the TiledSharp example as well ;)