Using a tmx map in monogame

Install TiledSharp

The easiest method is to create your MonoGame project then:

1. Click on project & select Nuget Package Manager
2. Search online for TiledSharp & Install
3. In the Game1.cs of your project add:

   using TiledSharp;
   

Declarations

Add the following declaration within the main class in Game1.cs:

        TmxMap map;
        Texture2D tileset;

        int tileWidth;
        int tileHeight;
        int tilesetTilesWide;
        int tilesetTilesHigh;

Load Content

Download the files here. You will need to copy these into the content folder of your project, you will also need to add the png file to the content pipeline and build it. Without the xnb file an error will be thrown.

In the LoadContent method add the following to load your map & tiles, it also sets the size of the tiles:

            map = new TmxMap("Content/exampleMap.tmx");
            tileset = Content.Load<Texture2D>(map.Tilesets[0].Name.ToString());

            tileWidth = map.Tilesets[0].TileWidth;
            tileHeight = map.Tilesets[0].TileHeight;

            tilesetTilesWide = tileset.Width / tileWidth;
            tilesetTilesHigh = tileset.Height / tileHeight;

Draw the Map

In the draw method, add the following code to draw each tile of the map:

spriteBatch.Begin();

            for (var i = 0; i < map.Layers[0].Tiles.Count; i++)
            {
                int gid = map.Layers[0].Tiles[i].Gid;

                // Empty tile, do nothing
                if (gid == 0)
                {

                }
                else
                {
                    int tileFrame = gid - 1;
                    int column = tileFrame % tilesetTilesWide;
                    int row = (int)Math.Floor((double)tileFrame / (double)tilesetTilesWide);

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

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

                    spriteBatch.Draw(tileset, new Rectangle((int)x, (int)y, tileWidth, tileHeight), tilesetRec, Color.White);
                }
            }

            spriteBatch.End();

Moving the map

We are going to setup the player controls to get the map movement required, we will record the movement and then adjust the spriteBatch.Draw() command in the Draw method.

So firstly create a new rectangle called bounds:

Rectangle bounds;

In the initialise method set this to be (0,0,0,0) in the initialize method:

bounds = new Rectangle(0, 0, 0, 0);

If your map has an object to show the starting point you could set bounds in the LoadContent method as well.

In the Update method add this code to get the keyboard input from the user:

KeyboardState keyState = Keyboard.GetState();

int scrollx = 0, scrolly = 0;

if (keyState.IsKeyDown(Keys.Left))
   scrollx = -10;
if (keyState.IsKeyDown(Keys.Right))
   scrollx = 10;
if (keyState.IsKeyDown(Keys.Up))
   scrolly = 10;
if (keyState.IsKeyDown(Keys.Down))
   scrolly = -10;
            
bounds.X = bounds.X + scrollx;
bounds.Y = bounds.Y + scrolly;

Now in the draw method change the code to this:

Rectangle newView = new Rectangle((int)x + bounds.X, (int)y+bounds.Y, tileWidth, tileHeight);
spriteBatch.Draw(tileset, newView, tilesetRec, Color.White);

Firstly it creates replaces the code

new Rectangle((int)x, (int)y, tileWidth, tileHeight)

from the spriteBatch.Draw() command with a rectangle we create called newView.

newView is the same as the code we replaced except we add the bounds.X to the x first, and the bounds.Y to y first. Now any movement of the arrow keys will change the X & Y in bounds, which should then change the view of the map.

Other TiledSharp options

You can load layers of your map individually:

var myLayer = map.Layers[2];

You can also access the object groups and objects within your map:

var hiddenChest = map.ObjectGroups["Chests"].Objects["hiddenChest"];