Isometric Game Development with Monogame.Tiled

I have started looking at this to develop an isometric game. Using the sample in the documentation I have been able to successfully import an isometric map from tiled into a Monogame app and it displays fine. Next stage is to animate a character walking over it. Is anyone aware of any useful samples that would show how this could work. Bit stuck with the documentation as it is. Any help would be appreciated. I’ve added my existing code below.

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using MonoGame.Extended;
using MonoGame.Extended.Tiled;
using MonoGame.Extended.Tiled.Renderers;
using MonoGame.Extended.ViewportAdapters;

namespace Project3
{
public class Game1 : Game
{
private readonly GraphicsDeviceManager _graphics;

    private OrthographicCamera _camera;

    private Vector2 _cameraPosition;

    private SpriteBatch _spriteBatch;

    private TiledMap _tiledMap;
    private TiledMapRenderer _tiledMapRenderer;

    public Game1()
    {
        _graphics = new GraphicsDeviceManager(this);
        Content.RootDirectory = "Content";
        IsMouseVisible = true;
    }

    private Vector2 GetMovementDirection()
    {
        var movementDirection = Vector2.Zero;
        var state = Keyboard.GetState();
        if (state.IsKeyDown(Keys.Down))
        {
            movementDirection += Vector2.UnitY;
        }

        if (state.IsKeyDown(Keys.Up))
        {
            movementDirection -= Vector2.UnitY;
        }

        if (state.IsKeyDown(Keys.Left))
        {
            movementDirection -= Vector2.UnitX;
        }

        if (state.IsKeyDown(Keys.Right))
        {
            movementDirection += Vector2.UnitX;
        }

        // Can't normalize the zero vector so test for it before normalizing
        if (movementDirection != Vector2.Zero)
        {
            movementDirection.Normalize();
        }

        return movementDirection;
    }

    private void MoveCamera(GameTime gameTime)
    {
        var speed = 200;
        var seconds = gameTime.GetElapsedSeconds();
        var movementDirection = GetMovementDirection();
        _cameraPosition += speed * movementDirection * seconds;
    }

    protected override void Initialize()
    {
        var viewportadapter = new BoxingViewportAdapter(Window, GraphicsDevice, 1200, 900);
        _camera = new OrthographicCamera(viewportadapter);

        Window.AllowUserResizing = true;


        base.Initialize();
    }

    protected override void LoadContent()
    {
        _tiledMap = Content.Load<TiledMap>("untitled");
        _tiledMapRenderer = new TiledMapRenderer(GraphicsDevice, _tiledMap);

        _spriteBatch = new SpriteBatch(GraphicsDevice);
    }

    protected override void Update(GameTime gameTime)
    {
        if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed ||
            Keyboard.GetState().IsKeyDown(Keys.Escape))
            Exit();

        MoveCamera(gameTime);
        _camera.LookAt(_cameraPosition);

        _tiledMapRenderer.Update(gameTime);

        base.Update(gameTime);
    }

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

        GraphicsDevice.BlendState = BlendState.AlphaBlend;

        _tiledMapRenderer.Draw(_camera.GetViewMatrix());

        base.Draw(gameTime);
    }
}

}

Create a character class… Character stores a texture and position (initialize and load these) , and has update and draw method…

In characters update method, get input and assign corresponding increments to position…
ie if key.right is pressed , pos.x += 10, if key.left is pressed, pos.x -= 10;
… IF you want your character to move in the same directions as the grid, diagonally, you just make your increments reflect that… Maybe pos+=new vector2(10,10)

Then in draw, well, just draw the character texture on its position, which will change with your key presses…

… You could ALSO have your tiles contain objects like characters, and move characters from square to square like a chess piece, locked in the grid…

1 Like

Very useful info thank you for that.

Sure man, and let me know if you need more details. Is this your first game?

Not with Monogame or Xna but I have never tried to use isometric tilemaps in it before.