RealDev

Minimaps are designed to give the player an easy way to assess their battlefield and make decisions. Minimaps also work towards letting the player know whats happening in other areas of the game area. This simple tutorial should help you to implement a minimap in your game.
 
Before starting to make your minimap you should first use a simple check list:

• Would I like there to be fog of war?
• Do I need to allow markers on the minimap to notify players of happenings?
• Do I need to make different sized markers for different units on my minimap?

Make sure you know what you want your minimap to be capable of before rushing into any code writing.
 
 
This tutorial will not show you how to implement fog of war on your minimap, but you can read a tutorial on implementing it over on Catatin Zima’s live space. The post there is not specifically for minimaps, but is a great example of easy fog of war.
 
Creating a 2D minimap in your game will just need a single blank Texture2D. It may be a good idea to create your Rectangle and colours before hand so that when it comes to drawing your minimap you can just reuse all your resources.

• Firstly we will create our blank texture2D with dimension 1×1 for the texture part of our minimap.
• In your game class: Texture2D MinimapTex;
• In your loadcontent method:

MinimapTex = new Texture2D(graphics.GraphicsDevice, 1, 1);
//create a new texture in memory Color[] texcol = new Color[1];
//array to store our colour values MinimapTex.GetData(texcol);
//get our colour data from our texture
texcol[0] = Color.White;
//set the single pixel to white
MinimapTex.SetData(texcol);
//set the textures colour data to the new data

• For some clarification, the 1×1 texture2D with the single pixel being white suits our needs as we can scale it and recolour it easily in our draw code.

 
The next bit of work that is needed to implement your minimap is drawing the actual box of the minimap. Now, you could generate an image of your terrain to use as the background but in this example it will be a semi transparent square. We will create our colour first that we will use as the background and then add the draw code to draw the square. Our minimap background is simple and we only need a colour and a rectangle for it.

• In your game class:

Color MinimapBGCol = new Color(150, 150, 150, 150);
Rectangle MinimapBGRect = new Rectangle(10, 10, 110, 110);

• In your draw method:

spriteBatch.Begin();
spriteBatch.Draw(MinimapTex, MinimapBGRect, MinimapBGCol);
//Insert the ally/enemy draw code here!!
spriteBatch.End();

You should so far have a smalish square rectangle showing in the top left corner of your game window if you run the game. To keep with tradition, I will now add enemies and allies, and draw them as red and blue respectively. All I really need for my draw code for the allies and enemies is a foreach and a single rectangle. If you dont have enmies/allies yet, not to worry, you can easily continue from here once you have them, or you can use a place holder. Because color already has red and blue built in we dont have to worry about making a new colour variable for the drawing of allies and enemies.

• The rectangle we will use goes in our main game class:

Rectangle NextMinimapItem = new Rectangle(0, 0, 3, 3);
//made a 3x3 rectangle so that the objects are more visible on your minimap

• Replacing the comment in your draw that says “//Insert the ally/enemy draw code here!!”

foreach (Vector2 tmp in Allies) {
   NextMinimapItem.X = (int)tmp.X + 9;
   NextMinimapItem.Y = (int)tmp.Y + 9;
   spriteBatch.Draw(MinimapTex, NextMinimapItem, Color.Blue);
}
foreach (Vector2 tmp in Enemies) {
   NextMinimapItem.X = (int)tmp.X + 9;
   NextMinimapItem.Y = (int)tmp.Y + 9;
   spriteBatch.Draw(MinimapTex, NextMinimapItem, Color.Red);
}
 
For interests sake, if you noticed that the allies are drawn before the enemies, it doesnt make that much of a difference, except that if you have an ally and enemy in the same spot I personally feel that seeing the enemy is more important. Although, if you want to make it very friendly for the player you can alternate the draw order every second or two and in that way make it flash between enemy/ally colours and draw the player’s attention. The next part of this tutorial will cover will be pinging on the minimap.
 
If you didnt manage to quite see how it all fits together I would suggest looking at the full source, but I will include a sample project after part 2 is posted.