Making an Interactive Treasure Map

  • 106 favourites



13,536 visits, 31,306 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

In this tutorial you'll use effects (and other stuff!) to create an interactive map that reveals locations only when the player has "discovered" them. Location hotlinks take the player from the map to corresponding levels. Each time a level is completed a new level is unlocked and revealed on the map. You can use this in adventure games or as a level loader for almost any kind of game.

The project can be created with the free edition of Construct 2.

The graphics used in the project, along with a completed version of the project (created using Construct 2 Release 93) can be downloaded here:

If you have trouble working with zip files, here is a link to a version of the .capx file saved with Construct 2 Release 95.


The cute map feature graphics are courtesy of Dan Cook of

Creating the Map Layout

1. Begin by downloading and unzipping, which contains the graphics for the game as well as a completed version of the project. Note the graphics folder. It contains several additional folders with graphics from the completed project.

2. Create a new project with the following properties:

Name: Treasure Map

Window Size: 640,480

3. Right-click on the layout and insert a new Tiled Background object. For the graphic choose the wood texture (000.png) in the graphics/Textures folder. Close the Animation Editor and make the following changes to the tiled background to make the tiled background form a backdrop for the map.

Name: TiledBackground

Plugin: Tiled background

Layer: Layer 0

Position: 0,0

Size: 640, 480

4. Now create the map. Insert a new Sprite object. In the Animation frames panel import both of the maps in the graphics/map folder. Delete the first frame (which is empty.) Now the first frame should be the complete, full color map, and the second frame should be the brown, blank map. In the property panel set the animation speed to 0.

Close the Animation Editor and make the following changes to the sprite in the Property panel:

Name: Map

Plugin: Sprite

Layer: Layer 0

Position: 320, 240

Size: 621, 455

Initial frame: 0

5. Go to the Layers panel and rename Layer 0 to CompleteMap.

6. Add two new layers. Name the top one Masks and the middle one BlankMap. Click on the BlankMap layer to make it the current layer.

Now, very importantly, in the Properties panel, change the Force own texture property to Yes. If you don't make this change, the effects used later will not work.

7. Copy and paste the Map sprite you created in step 4 and make the following changes in the Property panel:

Name: Map

Plugin: Sprite

Layer: BlankMap

Position: 320, 240

Size: 621, 455

Initial frame: 1

Changing the intial frame makes the blank map visible, completely obscuring the color map.

8. Nothing more needs to be done with the BlankMap layer. Since it will be in the way for the rest of the steps, go to the Layers panel and hide the BlankMap layer. Also lock both the CompleteMap and BlankMap layers to prevent things from being moved. Now click on the Masks layer to select it.


  • Order by
Want to leave a comment? Login or Register an account!
  • Hi, links to .zip and .capx file are no longer valid (Dropbox error404). Any chance of an update? Thanks.