[Archives] Construct 2 Minimap Tutorial

Archives, Game Development

Part Two: The Code

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

Some objects you’ll need in your game are:

  • your array from the Setup phase, if you need it
  • the player character object (however you handle that is up to you) with the int variables RoomQuadX and RoomQuadY
  • a Function object
  • the MapBG object from setup
  • the Tilemap object from setup
  • a RoomInfo object (I use a sprite) with the int variables RoomX, RoomY, RoomW, and RoomH
  • and a small sprite with a blinking animation to mark the room on the map the player is in.  I call it YouAreHere.
image

The first thing you’ll want to do is create a global text variable called MapData.  This variable carries a JSON string of the Tilemap’s data between rooms.  It’s important to have this, otherwise the minimap empties between rooms.

You will also want to place a RoomInfo object into every room in your game.  It should have the four variables mentioned above.  Set each variable according to your world map grid: RoomX should be the X coordinate of the upper-left corner on the map grid; RoomY should be the Y coordinate of the upper-left corner; RoomW should be set to the number of cells across the room is (2 for a 2×3 room); and RoomH should be the number of cells high the room is (3 for a 2×3 room).

image

At the Start of the Layout

There are a few things you’ll want to do at the start of the layout.
In a System > Start of Layout event, include the following sub-events.
Add a “MapData != “” ” condition (in other words, if it does not equal nothing), and add Load action on the tilemap to load from the JSON string in MapData.

In another blank sub-event, add two actions on the Character object. We’ll want to set RoomQuadX and RoomQuadY to the quadrant of the room the character is in.  The equation for this will be “Set RoomQuadX to floor(character.X/OriginalWindowWidth)” and “Set RoomQuadY floor(character.Y/OriginalWindowHeight)” – This will set the upper-left quadrant to 0,0 which will be important for some addition later.
In the same blank sub-event, call a function called UpdateTilemap.  We’ll create this function in a bit.

image

Updating the Minimap as you Move

The next group of events will update the minimip as you’re moving, but they don’t need to happen every tick.  They should happen at least once every 0.5 seconds, any less often and the minimap will appear to lag.  These events also do not need to happen while the player is standing still.  For this example, I am using the Platformer behavior, which can automatically tell me if the player is moving.  If you are using a different method, the condition may be different for you.
The conditions on this event are “Every 0.5 Seconds; Character Platform is Moving”
The actions will be the same as those we did at the start of layout:   “Set RoomQuadX to floor(character.X/OriginalWindowWidth)”  “Set RoomQuadY floor(character.Y/OriginalWindowHeight)” and “Call Function “UpdateTilemap” ”

image

The UpdateTilemap Function

This function is where we’ll be using the data in the RoomInfo object in each room, as well as the Array we created in the previous blog post.  We’ll want to update the individual tile in the Tilemap corresponding to the quadrant the player is standing in.  To find this, we need the coordinate of the upper-left corner of the room, plus the character’s current quadrant.  Luckily we have both of those already – The upper left corner is stored in the RoomInfo object, and we just finished calculating the character’s quadrant.

We’ll also need the tile we want to display on the minimap.  Those should already be stored in the array we made in Setup.

So the function call will be
“On Function “UpdateTilemap” > Set Tile (RoomInfo.roomX+Character.RoomQuadX , RoomInfo.roomY+Character.RoomQuadY) to tile Array.At(RoomInfo.roomX+Character.RoomQuadX,RoomInfo.roomY+Character.RoomQuadY) (normal)”

At this point we want to save the tilemap data in case the player changes rooms, so Set Mapdata to MapTilemap.TilesJSON

The last thing we want to do is move the tilemap so that the current quadrant is centered.  Otherwise, the map will update, but the room will be off-screen.  This is where that small YouAreHere sprite comes in.  This sprite should be centered exactly in the middle of the MapBG object.  We will be setting the Tilemap’s position in relation to this object, like so:
Set Tilemap Position to YouAreHere.X-10*(roominfo.roomx+Character.RoomQuadX), YouAreHere.Y-10*(roominfo.roomy+Character.RoomQuady)

image

If everything is set up correctly, you should at this point have a working minimap!
This method can be used on its own, or as a base for other mechanics.  You can add functionality that lets you give the player Map objects that fill in unvisited areas, have hidden rooms that don’t show on the map, or anything else built into this system.

I hope this tutorial is useful!  If you’re interested in the .capx for this tutorial, it will be available for Source Code ($10+) tier Patrons Support me on Patreon if you enjoy my work and want rewards like source code, exclusive games, pixel art, and more!