[Archives] Construct 2 Minimap Tutorial

Archives, Game Development

Part One: The Setup

A few years ago, I wrote a blog tutorial detailing how to create a minimap HUD in Construct 2.  Since then I’ve changed web hosts and that blog post has been lost, and (more importantly) Construct 2 has since then added the Tilemap object, which changes everything. (Yeah, the previous post was way old.)
Anyway, it’s long overdue that I rewrite that blog post.
Let’s get started!


Setting Up your Rooms for a Minimap

This tutorial won’t go through the rest of your game, including movement mechanics (I just use the default Platformer behavior for this tutorial’s purpose), camera, room transitions, etc.  This tutorial is also geared towards platformers, but it could also work with top-down maps.

You will also need your game’s world map completed, and it will need to be in a grid format (tilemaps work in a grid).  Each cell or quadrant of a room should be the size of your game’s default window screen.  Your rooms don’t have to be square, but each side should be a multiple of the original window size.  For instance, if your game runs at 640×480, each square in the grid should represent a 640×480 area.  A 2-square-by-2-square room on your map will be a 1280×960 room in-game.
This is the three-room map I will be using for this tutorial.  Note that I have numbered each room’s X and Y coordinates. These coordinates will be used throughout the process.


Start by creating a new layer in Construct 2.  This layer must be global, and needs to have a parallax rate of 0,0, meaning it will not move.  Name it something like MapHud.  Create the same layer in each layout which will contain the minimap, and be sure it’s named the same each time.  You will notice you can no longer edit this layer in any layout except the one you first created it it.  This is because it’s global, and will auto-replicate itself into any new layout.
One important aspect of this layer is that you must set “Force Own Texture” to Yes.  This is used to contain the minimap to a specific size.


Create a new sprite called MapBG on the MapHud layer.  Set it to be a solid color (any color will work).  If you want, you can give it a second animation that is a boarder, which will sit on top decoration. The boarder is optional.  

Next, create a Tilemap object on the MapHud.  This object will become the minimap.  The goal is for each room to appear on the map as the player finds, it so you do not need to paint tiles on the tilemap object.  The tile size can be whatever you choose. I’m using a 10×10 grid.  Each square tile will represent one section or quadrant of the map you drew earlier – this is why it’s important that your map be grid-based.
An important aspect of this object is that its blend mode is set to Source Atop, and it must be placed on top of the MapBG object.  This will mask the object so that the map is contained to the size of the MapBG object.  Any tiles that have been found but are too far off to the side will be automatically masked as invisible.
You will need to determine what you would like to display on the mini-map.  The more complicated your minimap, the more complicated the setup – displaying a simple “found/unfound” map will be much less complicated than a map which displays walls, doors, items, etc.
Draw your tilemap’s image using the Construct 2 image editor, or your preferred image editor, keeping in mind the grid size and the tiles you need.

Construct 2 numbers tilemap tiles from left to right, starting with zero.  Here’s the tilemap I used in this example, with numbers added to refer to the tile numbers Construct assigns.


Create an array.  This array will be used to store the tile used to represent each square of the map.  If you’re using a simple “found/unfound” binary square system, you don’t need this – just assume all map squares will be represented by tile 0.  Also, if you are creating a procedurally generated game, this step can be included in the map generation.
Each cell in the array represents the X,Y coordinate of each map square.  The value is the number of the tile used to display that square.  You do not need to specify array values for any empty cells that contain no rooms.
The map used in this example contains this array:


There is also another method you can use that does not involve this step.  It uses a map sprite, masked by a tilemap.  This works well for games with manual level design, but does not work for procedurally generated games.  I’ll write a blog post going over that another time.

With setup complete, it’s time to begin coding the minimap.

Please read Page 2 for the coding portion of this tutorial.