Show correctly a tilemap made with Tiled issue

Extended
1

Hi, I have the next problema with MonoGame.Extended and his 2D camera (OrthographicalCamera):

Want show a tilemap made in Tiled (1.3.1 version) using a x2 zoom as if it were its normal size and showing with OrtographicalCamera from MonoGame.Extended.

The problem is that the tiles are displayed misshappen.

A pair of images about that:

As should be displayed (screen capture from Tiled program):

As the game actually displayed (red rectangles where are the deformed tiles):

Here the display code:

public class Game1 : Game
{  
    GraphicsDeviceManager graphics;
    SpriteBatch spriteBatch;

    // Contain screen resolution (640x480).
    public Rectangle screenRectangle;

    // From MonoGame.Extended
    public static TiledMapRenderer mapRender;
    // Main map.
    public static TiledMap map1;

    DefaultViewportAdapter viewportAdapter;

    Matrix transformMatrix;
    Matrix projectionMatrix;
    
    // Game cameras.
    // This for show the level (with zoom).
    public static OrthographicCamera gameCamera2D;
    // This for show the characters (without zoom).
    public static OrthographicCamera charactersCamera2D;

    Player player1;
    
    protected override void Initialize()
    {          
        // Viewport for game cameras.
        viewportAdapter = new DefaultViewportAdapter(
            GraphicsDevice
        );
        
        gameCamera2D = new OrthographicCamera(viewportAdapter);            
        charactersCamera2D = new OrthographicCamera(viewportAdapter);           
     
        // Instancied the player (is the guy with blue jacket in the pictures).
        player1 = new Player();
        player1.Initialize();
        var initialPos = new Vector2(40, 40);
        player1.SpritePlayer.Position = initialPos;

        base.Initialize();
    }

    protected override void LoadContent()
    {
        spriteBatch = new SpriteBatch(GraphicsDevice);

       player1.LoadContent(Content);

       map1 = Content.Load<TiledMap>("GameMaps/Map1/retroDarkRoom");            

       mapRender = new TiledMapRenderer(GraphicsDevice, map1);           
    }

    protected override void Update(GameTime gameTime)
    {
        // Update player logic.                       
        player1.Update(renderContext);

        // Get the player position for pass to game cameras.
        var playerCameraPosition = new Vector2(
            (int)player1.SpritePlayer.Position.X, (int)player1.SpritePlayer.Position.Y
        );
     
        // Cameras follow the player.
        gameCamera2D.LookAt(playerCameraPosition);            
        charactersCamera2D.LookAt(playerCameraPosition);                        
        
        mapRender.Update(gameTime);            

        base.Update(gameTime);
    }

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

        // Get the transform matrix of Ortographical camera.
        transformMatrix = gameCamera2D.GetViewMatrix();

        // Get the projection matrix.
        projectionMatrix = Matrix.CreateOrthographicOffCenter(
            0
            , screenRectangle.Width // 640
            , screenRectangle.Height // 480
            , 0
            , 1
            , 0
        );            
        
        // SpriteBatch of the level (with zoom)
        spriteBatch.Begin(
            transformMatrix: transformMatrix 
            , samplerState: SamplerState.PointClamp                
        );
        spriteBatch.End();
                    

        // SpriteBatch for the sprites.
        spriteBatch.Begin(
            transformMatrix: charactersCamera2D.GetViewMatrix()
            , samplerState: SamplerState.PointClamp                
        );

        // Zoom in the map.
        ZoomMap(2);

        // This avoid a display tiles error (not that of this topic).
        mapRender.Draw(ref transformMatrix, ref projectionMatrix, null, 0);

        player1.Draw(renderContext);

        spriteBatch.End();                        

        base.Draw(gameTime);
    }

    // This function set the camera zoom.
    private void ZoomMap(int levelOfZoom) {
        switch (levelOfZoom) {
            case 1:
                // Normal zoom.
                gameCamera2D.Zoom = Convert.ToInt32(1);
                break;
            case 2:
                // x2 zoom.
                gameCamera2D.Zoom = Convert.ToInt32(2);
                break;
            default:
                gameCamera2D.Zoom = Convert.ToInt32(1);
                break;
        }            
    }
}

Beforehand thank you very much.

2

You should use a render target that is the same size as your map

initialize render target in contructor (important, do not initialize render target for evert draw call)
_renderTarget = new RenderTarget2D(graphicsDevice, TiledMap.WidthInPixels, TiledMap.HeightInPixels);

Draw Function

// First set render target
graphicsDevice.SetRenderTarget(_renderTargetBack);

// Draw your map stuff here

// Restore render target

graphicsDevice.SetRenderTarget(null);

// Draw your render target

spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend,transformMatrix: camera.GetViewMatrix(), samplerState: SamplerState.PointClamp);

spriteBatch.Draw(_renderTargetBack, new Vector2(0, 0), _renderTargetBack.Bounds, Color.White, 0,Vector2.Zero,Vector2.One, SpriteEffects.None, 1);
3

Don’t worry now, I find the solution:
I make my own TiledMap render using TiledSharp like this webpage: https://github.com/Temeez/TiledSharp-MonoGame-Example

But thanks @janfokke for the answer.

4

@davidgd72k Thanks for sharing. It is probably it worth having multiple type of rendering techniques; one using SpriteBatch and one using custom primitives. I think this would solve the problem better since you can make the choice of which one to use. I will keep this in mind in the next iteration of MonoGame.Extended.

The original problem you described as been reported before. I believe it has to do with how the texture coordinates (UV) are made; it seems that the sub-texture is not sampled perfectly. Further research needs to be made.