Making an Interactive Treasure Map

Favourite 106 favourites
Tutorial written by kittiewanOriginally published on 12th, June 2012 - 10 revisions

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.

Import the two map graphics as frames in the default animation


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.

Set Force own texture to Yes on the BlankMap layer


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.

Copy and paste Map into BlankMap layer and set initial frame to 1


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.

Hide and lock BlankMap and lock CompleteMap layers


Comments

0
mltreadway 6,214 rep

Terrific, Thank you very much!

Monday, June 18, 2012 at 7:20:09 PM
0
asmag 2,786 rep

Hi!

The capx file is corrupt because I have an error when I try to open it on Construct 2 application. Both version of release (93 and 95) raise the same error.

Can you help me, please?

Sunday, June 24, 2012 at 8:46:32 PM
1
kittiewan 12.4k rep

@asmag,
I'm having no problem, so I wonder if you unzipped the file before you tried to open it in C2. Just in case I placed an unzipped version of the .capx saved with R95. There is a link to it now in the tutorial. (Sorry I had to be so indirect, but the tutorial comment feature though my original answer with the link in it was spam!)

Sunday, June 24, 2012 at 10:58:12 PM
-2
asmag 2,786 rep

Oh dear @kittiewan, I'm not as beginner as well .. lol I had unzipped the file before opening it. But in any case, I posted the error message that appears when I try to run the layout. See the error message: https://dl.dropbox.com/u/87517398/Error.png

Monday, June 25, 2012 at 12:42:43 AM
-1
asmag 2,786 rep

Can I ask you a question? Did you use any plugin or behavior in this project? Because the error occurs immediately after opening the project file.

Monday, June 25, 2012 at 3:52:48 AM
0
loccy 4,690 rep

Brilliant, just what I needed.

Monday, June 25, 2012 at 7:10:50 AM
0
kittiewan 12.4k rep

Thanks, loccy.
@asmag - In your screen shot I can see the layouts and event sheets loaded. Definitely a crash with the normal useless Windows error only in Spanish. The only objects I use are 3 sprites, a tiled background and Touch. No 3rd party plugins and no features that require paid version. Did you download the version I saved with release 95?

Monday, June 25, 2012 at 7:25:19 PM
-1
asmag 2,786 rep

Good evening brother .. The error message is in Portuguese. I am Brazilian state of Sao Paulo. To answer your question I downloaded the version you asked me and tried to open it but it did not work. I'll try to open tomorrow from my job's computer and see if the same error occurs. Thanks a lot for your patience and persistence.

Regards.

asmag.

Tuesday, June 26, 2012 at 12:33:23 AM
-1
asmag 2,786 rep

Hi Kittiewan!

Finally it worked! Here at my work computer could open the file. Capx perfectly. Thank you.

hug

asmag

Tuesday, June 26, 2012 at 5:41:05 PM
0
kittiewan 12.4k rep

@asmag - Desculpe-me! Sinto vergonha. Foi h� muito tempo, mas morei no Rio por alguns anos. Espero que ainda pode diferenciar entre Espanhol e Portugu�s. (Translation: Forgive me! I'm so ashamed. It was a long time ago, but I lived in Rio for a few years. I hope I can still tell the difference between Spanish and Portuguese!)

Glad you finally got it working.

Tuesday, June 26, 2012 at 9:25:36 PM
0
asmag 2,786 rep

Que legal velho.. não se preocupe com isso... fiquei muito contente em saber disso.. Sou programador e trabalho em uma indústria do interior de São Paulo como Analista/Programador. Estou me aventurando no mundo dos games como hobby mesmo.. Parabéns pelo seu belo trabalho.

Translation:

This is so cool man! you do not worry about it ... I was very glad to hear it .. I'ma programmer and work in an industry of São Paulo as an Analyst / Programmer. I'm so happy for this gaming world .. Congratulations! Your post is beautiful!

Tuesday, June 26, 2012 at 11:19:57 PM
0
mizsadako 2,206 rep

Uhn... cannot understand WHY i cannot complete the step .5 (On start of Layout event, with an action to move the Location objects to the BlankMap layer. ) from this tutorial. The option for the Blankmap simply doesn't show, what am I supposedly to be doing of wrong?

Saturday, July 21, 2012 at 5:30:06 PM
0
kittiewan 12.4k rep

It won't show up. You just type in "BlankMap" with the quotes as the name of the layer. I'll add a picture to show that in the tutorial.

Saturday, July 21, 2012 at 9:42:58 PM
-1
jwjb 4,919 rep

@kittiewan, looks like another great tutorial that was suggested by 'SocalSam' in their 'Windows 8 evaluation process" tutorial which I will go through this weekend, thanks.

Saturday, September 15, 2012 at 12:37:03 AM
0
kittiewan 12.4k rep

Thanks, jwjb. I hope you find it useful--it was fun to make, although I got a little carried away with all of the locations.

Saturday, September 15, 2012 at 2:11:34 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.