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:
TreasureMapTutorial.zip
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.
TreasureMap_r95.capx
The cute map feature graphics are courtesy of Dan Cook of LostGarden.com.
Creating the Map Layout
1. Begin by downloading and unzipping TreasureMapTutorial.zip, 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.