Tilemap Not Rendering Properly

Extended
1

I’m using code from the demo, it works properly on a tilemap with a single layer. But as soon as I add a second layer, it stops working. I’m creating .tmx and .tsx files with Tiled 1.0.2.

This is what it looks like using Monogame Extended code from the demo.

Screen Shot 2017-08-09 at 11.08.25 PM.png886×864 12.8 KB

This is the map in Tiled.

The tiledmap file looks like this

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" tiledversion="1.0.2" orientation="orthogonal" renderorder="right-down" width="5" height="5" tilewidth="32" tileheight="32" nextobjectid="1">
 <tileset firstgid="1" source="Trees.tsx"/>
 <tileset firstgid="81" source="Dirt.tsx"/>
 <layer name="Tile Layer 2" width="5" height="5">
  <data encoding="csv">
81,81,81,81,81,
81,81,81,81,81,
81,81,81,81,81,
81,81,81,81,81,
81,81,81,81,81
</data>
 </layer>
 <layer name="Tile Layer 1" width="5" height="5">
  <data encoding="csv">
69,0,0,0,69,
69,69,69,69,69,
69,69,69,69,69,
69,69,69,69,69,
69,69,69,69,69
</data>
 </layer>
</map>

I have a much much more complicated tilemap with animated tiles that I would love to get working in Monogame. That map fails in similar fashion to this one.

3

First of all, either I’m misunderstanding, or that’s really bad advise @Madolite. If you’re going to screenshotting Tiled, what is the point in using the software?

The good news is, it looks like your position, and sizes are correct for your tiles.

It looks like the problem is with your “Draw” code. No doubt you have something like the below:

spriteBatch.Draw(myTexture, myRectangle, Color.White);

if that is the case, I’d suggest something like:

spriteBatch.Draw(myTexture, myPosition, mySourceRectangle, Color.White);

The important bit here is the “mySourceRectangle”. This is where on the tilemap you’d like to reference. So an example would be:

var mySourceRectangle1 = new Rectangle(0, 0, 32, 32); // this is the top-left
var mySourceRectangle2 = new Rectangle(32, 0, 32, 32); // this is the top-left + 1 on the x
var mySourceRectangle3 = new Rectangle(64, 0, 32, 32); // this is the top-left + 2 on the x

Now obviously this is all an assumption without actually seeing your code.

If this is no help, try posting your draw code.

4

If you’re going to screenshotting Tiled, what is the point in using the software?

Because Tiled is arguably much faster than GIMP or Paint.Net at using existing sprites to draw custom tilemaps quickly, especially larger ones. But either way, I can understand how non-definitive answers just adds tangental clutter, so I deleted my initial reply for cleanliness.

5

That’s weird. Could you please raise a bug on github and attach the TMX, TSX and associated textures so we can take a closer look and try reproduce the issue.