[SOLVED] Tiles are not rendered correctly

Extended
1

I can’t get MonoGame.Extended.Tiled to work. I followed this sample.

Here are the steps to reproduce the error:

  1. I create a new MonoGame CrossPlatform Desktop Project (MonoGame version 3.6) in Visual Studio (2015).
  2. I install the MonoGame.Extended packages (latest stable release 0.6.377) via NuGet.
  3. I follow the sample code.
// I add these members to the template
private Camera2D camera;
private TiledMap map;
private TiledMapRenderer mapRenderer;

// I add this code to LoadContent
var viewportAdapter = new BoxingViewportAdapter(Window, GraphicsDevice, 800, 480);
camera = new Camera2D(viewportAdapter);
// I created a map named "level" (see images), added it to the Content Pipeline - successful build
// Naturally I also added the necessary tileset ("PokemonTiles.png") with the default Texture Importer
map = Content.Load<TiledMap>("level");
mapRenderer = new TiledMapRenderer(GraphicsDevice);

// I add this to Draw
var viewMatrix = camera.GetViewMatrix();
var projectionMatrix = Matrix.CreateOrthographicOffCenter(0, GraphicsDevice.Viewport.Width,
         GraphicsDevice.Viewport.Height, 0, 0f, -1f);
mapRenderer.Draw(map, ref viewMatrix, ref projectionMatrix);

When I start the game I get this:

1.png802×512 48.6 KB

There are 2 problems with this image. First, the wrong tiles are rendered. Second, for some reason the transparent part of these incorrect tiles is filled with the color black.
Here is how it should look like:

2.png1248×798 71.2 KB

Please help me, as I am not sure how to fix this.

2

Can you try pre-release packages and see if still is a problem?
The transparent part of the texture is set by the ColorKey property in the content builder for the texture.

3

I tried multiple versions, older and newer ones, but neither of them worked.

No success with the transparency either - the problematic tiles already contain a transparent background, the ColorKey processor parameter only makes those parts of the tiles transparent that are correctly rendered (when I set the color to brown, for example, the - parts of the - fences disappear, meaning they become black as well).

4

It’s very strange since we have a number of demo maps that do render correctly. Could you provide the assets that cause the problem?

5

Yes, of course, but I doubt there is any problem with them. Other assets do not work either. I haven’t tried out the demo maps yet.

TMX data:
https://pastebin.com/xNWfxsqG
I also uploaded it to here:
http://s000.tinyupload.com/?file_id=95671439735136826972

Image (it’s actually from here):

6

Found the problem. You are missing a columns XML attribute on the tileset XML element. I discovered this by opening the map in Tiled and saving it again. The following map works:

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" renderorder="right-down" width="32" height="32" tilewidth="16" tileheight="16" nextobjectid="1">
 <tileset firstgid="1" name="PokemonTiles" tilewidth="16" tileheight="16" tilecount="104" columns="8">
  <image source="PokemonTiles.png" width="128" height="208"/>
 </tileset>
 <layer name="Tile Layer 1" width="32" height="32">
  <data encoding="base64" compression="zlib">
   eJztlUEOgDAIBHlRb+pJe1L//yN5gd0CayDxMCeSTQMDbSLSirAoq7IZ6978XTmUPllH3zXKP5VLuSfro1w03worN7OLbNCZsmDP1NrfqLlY++u9Ad7+em9AVV+YZN71iLeNMt5mF+GVJyPCq8puZgHxEHXV4jTiEOqZxUfEIdSz38d4PyJzET9YDqN+sBz2ZmX+S78g224/AnzCIQ==
  </data>
 </layer>
</map>
1 Like
7

Wow… Thank you very much!

My Tiled version was 0.14.2, but the columns attribute was only added in 0.15.

Regarding the transparency, I met another interesting phenomenon.
Only when I add this:

spriteBatch.Begin();
// optional drawing
spriteBatch.End();

after the mapRenderer Draw call, will the tiles be transparent. Black background is gone. I don’t know why, but it works now.

Edit:
I just realized if I do it like this:

spriteBatch.Begin();
mapRenderer.Draw(map, ref viewMatrix, ref projectionMatrix);
spriteBatch.End();

It works too, plus I can set the parameters of Begin, e.g.

spriteBatch.Begin(SpriteSortMode.Deferred,
                BlendState.AlphaBlend,
                SamplerState.PointClamp,
                DepthStencilState.None,
                RasterizerState.CullCounterClockwise);

To render the zoomed map without blur.

8

Yes, you need to set the render state to AlphaBlend: GraphicsDevice.BlendState = BlendState.AlphaBlend.
The TiledMapRenderer does not apply states for you because there is no “begin” and “end”, just “draw”. You can also draw on a layer by layer basis. So for example in classic RPG Maker 2000 and up there is a “ground”, “mask”, and “fringe” layers. The “ground” layer would use BlendState.Opaque and would be drawn below the player and all enitites / game objects; it has tiles with no transparency. The “mask” layer would use BlendState.AlphaBlend and would be drawn below the player and all entities / game objects; it can have tiles with transparency. The “fringe” layer also uses BlendState.AlphaBlend and would be drawn above the player and all entities / game objects. This kind of rendering scheme is called Painter’s Algorithm and is suitable for rendering Tiled maps for a top down game.