Tiled

Tiled Logo

Tiled

The MonoGame.Extended.Tiled library allows you to load and render maps files (.tmx) created with the Tiled Map Editor.

Installation

Content Pipeline

To load a Tiled map you first to compile it using the Content Pipeline. If you have not setup the Content Pipeline with MonoGame.Extended yet see the instructions on how to install the Content Pipeline in the getting started section.

NuGet

MonoGame.Extended.Tiled is distributed via a NuGet package. You can add the NuGet package to your C# project through your IDE of choice (Visual Studio, Xamarin Studio, Rider, etc) or through the Command Line Interface (CLI) using the dotnet command.

dotnet add package MonoGame.Extended.Tiled

Example

The assets used in this example can be downloaded here

Usage

We start by including the Tiled namespaces.

using MonoGame.Extended.Tiled;
using MonoGame.Extended.Tiled.Renderers;

Next, we define our Tiledmap and TiledMapRenderer

TiledMap _tiledMap;
TiledMapRenderer _tiledMapRenderer;

Which we then initialize in the LoadContent function.

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

Finally we render and update the map by calling mapRenderer.Update() and mapRenderer.Draw() respectively.

protected override void Update(GameTime gameTime)
{
_tiledMapRenderer.Update(gameTime);
}
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Black);
_tiledMapRenderer.Draw();
}

Adding a Camera

The game now renders the TiledMap. The next step is to navigate through the map with a Camera.

We start by including the Camera namespaces.

using MonoGame.Extended;
using MonoGame.Extended.ViewportAdapters;

Next, we define our Camera

private OrthographicCamera _camera;

Which we then initialize in the Initialize function.

protected override void Initialize()
{
var viewportadapter = new BoxingViewportAdapter(Window, GraphicsDevice, 800, 600);
_camera = new OrthographicCamera(viewportadapter);
}

We need to tell the Camera where to look. To do this, we declare the following field.

private Vector2 _cameraPosition;

We update this field with the following function.

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;
}
movementDirection.Normalize();
return movementDirection;
}
private void MoveCamera(GameTime gameTime)
{
var speed = 200;
var seconds = gameTime.GetElapsedSeconds();
var movementDirection = GetMovementDirection();
_cameraPosition += speed * movementDirection * seconds;
}

Which we then use in the Update function.

protected override void Update(GameTime gameTime)
{
_tiledMapRenderer.Update(gameTime);
MoveCamera(gameTime);
_camera.LookAt(_cameraPosition);
base.Update(gameTime);
}

To render the map with our Camera, we call the Draw function with the Camera's ViewMatrix as follows.

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Black);
_tiledMapRenderer.Draw(_camera.GetViewMatrix());
}