Making an Interactive Treasure Map

  • 106 favourites



13,538 visits, 31,308 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.

Creating the Map Layout (Continued)

9. Insert a new Sprite object. In the Animation frames panel import the four orange mask shapes in the graphics/mask folder.

Delete the first frame (which is empty.) 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: Location

Plugin: Sprite

Layer: Masks

Position: 124, 103

Size: 154, 154

Initial frame: 0

Effect: Destination out (Very important or things won't work!)

Notice that the first Location mask is positioned over the compass rose and the adjacent white cottage in the top left corner of the map. An instance of this sprite will be positioned over each feature on the map to link it to a corresponding level in the game. You can create any mask shape you like for your locations. You can also resize the masks as needed to cover your map features.

Before you place more Location sprites, add the following Instance variables:

Name: LocationNumber

Type: Number

Initial value: 0

Name: Layout

Type: Text

Initial value: Home

Also add a Fade behavior, making the following changes to its properties:

Fade in: 2

Fade out: 0

This will make the location mask fade in gradually, but since Fade out is set to 0 it won't fade out.

10. Now copy and paste the Location object, making changes to the instances shown below.

NOTE: Okay, I got a bit carried away here! You don't need to create all of the masks if you don't want to. You'll get the effect if you just create the first three or four. You can load the completed version of the project to see the whole thing in action.

Location(0) (already created above)

Position: 124, 103

Size: 154, 154

LocationNumber: 0

Layout: Home

Initial frame: 0

Location(1) (Note that a different shape was used for the mask by choosing a different animation frame.)

Position: 111, 270

Size: 121,111

LocationNumber: 1

Layout: Windmill

Initial frame: 1


Position: 122, 381

Size: 100,100

LocationNumber: 2

Layout: WhiteHouse

Initial frame: 2


Position: 253, 356

Size: 157, 100

LocationNumber: 3

Layout: Town

Initial frame: 1


Position: 216, 190

Size: 105,105

LocationNumber: 4

Layout: Mine

Initial frame: 0


Position: 282, 130

Size: 96, 157

LocationNumber: 5

Layout: Observatory

Initial frame: 0


Position: 435, 90

Size: 201, 186

LocationNumber: 6

Layout: Watchtower

Initial frame: 2


Position: 351, 358

Size: 74,74

LocationNumber: 7

Layout: Shack

Initial frame: 0

Location(8) (Take note of this one: multiple masks were used to reveal a single location. Since they all have the same LocationNumber and all point to the same layout, they operate as if they were a single Location object.)

Position: 400, 420

Size: 74,74

LocationNumber: 8

Layout: PirateCoast

Initial frame: 0

Also copy and paste three more copies of this sprite, positioning them at (458,414), (509,422) and (564,434).


Position: 581, 352

Size: 100,100

LocationNumber: 9

Layout: MonsterDen

Initial frame: 0


Position: 501, 227

Size: 125,124

LocationNumber: 10

Layout: Treasure

Initial frame: 3

11. Add a Touch object so you can make the map respond to touches:

Name: Touch

Plugin: Touch

Use mouse input: Yes

12. This completes the layout. As a final step, go to the Project panel and rename Layout 1 to Map.


  • 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.