Fixing our camera

Want a video version?

Till now our game had been showing like this:

And This thing right here, showing the blue background

along with the map is very ugly.

So, in this tutorial we will be removing the background so that our game starts looking like this:

And this looks much better

The code and Explanation:

	*/For this thing we will need to make a matrix*/
	using Microsoft.Xna.Framework;
	using Microsoft.Xna.Framework.Graphics;
	using Microsoft.Xna.Framework.Input;
	using MonoGame.Extended.Serialization;
	using MonoGame.Extended.Sprites;
	using MonoGame.Extended.Content;
	using TiledSharp;
	using System.Collections.Generic;
	namespace RPG_1
	{
	public class Game1 : Game
	{
	private GraphicsDeviceManager _graphics;
	private SpriteBatch _spriteBatch;
	private Player player;
	private TmxMap map;
	private TileMapManager mapManager;
	private List<Rectangle> collisionObjects;
	private Matrix matrix;//The camera matrix
	public Game1()
	{
	_graphics = new GraphicsDeviceManager(this);
	Content.RootDirectory = "Content";
	IsMouseVisible = true;
	}
	protected override void Initialize()
	{
	// TODO: Add your initialization logic here
	player = new Player();
	_graphics.PreferredBackBufferWidth = 256 * 2;//Making the window size twice our tilemap size
	_graphics.PreferredBackBufferHeight = 256 * 2;
	_graphics.ApplyChanges();
	var Width = _graphics.PreferredBackBufferWidth;
	var Height = _graphics.PreferredBackBufferHeight;
	var WindowSize = new Vector2(Width,Height);//Storing the window size
	var mapSize = new Vector2(256,256);//Our tile map size
	matrix = Matrix.CreateScale(new Vector3(WindowSize / mapSize, 1));//Creating our matrix
	base.Initialize();
	}
	protected override void LoadContent()
	{
	_spriteBatch = new SpriteBatch(GraphicsDevice);
	map = new TmxMap("Content/map.tmx");
	var tileset = Content.Load<Texture2D>("Tiny Adventure Pack/"+map.Tilesets[0].Name.ToString());
	var tileWidth = map.Tilesets[0].TileWidth;
	var tileHeight = map.Tilesets[0].TileHeight;
	var TileSetTilesWide = tileset.Width / tileWidth;
	mapManager = new TileMapManager(_spriteBatch,map,tileset,TileSetTilesWide,tileWidth,tileHeight);
	collisionObjects = new List<Rectangle>();
	foreach(var o in map.ObjectGroups["Collisions"].Objects)
	{
	collisionObjects.Add(new Rectangle((int)o.X,(int)o.Y,(int)o.Width,(int)o.Height));
	}
	SpriteSheet[] sheets = { Content.Load<SpriteSheet>("Tiny Adventure Pack/Character/char_two/Idle/playerSheetIdle.sf",new JsonContentLoader()),
	Content.Load<SpriteSheet>("Tiny Adventure Pack/Character/char_two/Walk/playerSheetWalk.sf",new JsonContentLoader())};
	player.Load(sheets);
	// TODO: use this.Content to load your game content here
	}
	protected override void Update(GameTime gameTime)
	{
	if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
	Exit();
	var initpos = player.pos;
	player.Update(gameTime);
	foreach(var rect in collisionObjects)
	{
	if(rect.Intersects(player.playerBounds))
	{
	player.pos = initpos;
	player.isIdle = true;
	}
	}
	// TODO: Add your update logic here
	base.Update(gameTime);
	}
	protected override void Draw(GameTime gameTime)
	{
	GraphicsDevice.Clear(Color.CornflowerBlue);
	mapManager.Draw(matrix);//Passing the matrix
	player.Draw(_spriteBatch,matrix);
	// TODO: Add your drawing code here
	base.Draw(gameTime);
	}
	}
	}

view raw Game1.cs hosted with ❤ by GitHub

	/*Same goes for the player class*/
	public void Draw(SpriteBatch spriteBatch,Matrix matrix)
	{
	spriteBatch.Begin(//All of these need to be here :(
	SpriteSortMode.Deferred,
	samplerState:SamplerState.PointClamp,
	effect:null,
	blendState:null,
	rasterizerState:null,
	depthStencilState:null,
	transformMatrix:matrix/*<-This is the main thing*/);
	if (isIdle)
	spriteBatch.Draw(playerSprite[0], pos);
	else
	spriteBatch.Draw(playerSprite[1], pos);
	spriteBatch.End();
	}
	}

view raw Player.cs hosted with ❤ by GitHub

	/*In your Tile map manager class
	change
	spriteBatch.Begin();
	to
	spriteBatch.Begin(//All of these need to be here :(
	SpriteSortMode.Deferred,
	samplerState: SamplerState.PointClamp,
	effect: null,
	blendState: null,
	rasterizerState: null,
	depthStencilState: null,
	transformMatrix: matrix/*<-This is the main thing*/);
	As a result your Draw function will start looking like this below:
	*/
	public void Draw(Matrix matrix)
	{
	spriteBatch.Begin(//All of these need to be here :(
	SpriteSortMode.Deferred,
	samplerState: SamplerState.PointClamp,
	effect: null,
	blendState: null,
	rasterizerState: null,
	depthStencilState: null,
	transformMatrix: matrix/*<-This is the main thing*/);
	for (var i=0;i<map.TileLayers.Count;i++)
	{
	for(var j=0;j<map.TileLayers[i].Tiles.Count;j++)
	{
	int gid = map.TileLayers[i].Tiles[j].Gid;
	if(gid==0)
	{
	//do nothing
	}
	else
	{
	int tileFrame = gid - 1;
	int column = tileFrame % tilesetTilesWide;
	int row = (int)Math.Floor((double)tileFrame / (double)tilesetTilesWide);
	float x = (j % map.Width) * map.TileWidth;
	float y = (float)Math.Floor(j / (double)map.Width) * map.TileHeight;
	Rectangle tilesetRec = new Rectangle((tileWidth) * column, (tileHeight) * row, tileWidth, tileHeight);
	spriteBatch.Draw(tileset,new Rectangle((int)x,(int)y,tileWidth,tileHeight),tilesetRec,Color.White);
	}
	}
	}
	spriteBatch.End();
	}

view raw TileMapManager.cs hosted with ❤ by GitHub