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
Location(2)
Position: 122, 381
Size: 100,100
LocationNumber: 2
Layout: WhiteHouse
Initial frame: 2
Location(3)
Position: 253, 356
Size: 157, 100
LocationNumber: 3
Layout: Town
Initial frame: 1
Location(4)
Position: 216, 190
Size: 105,105
LocationNumber: 4
Layout: Mine
Initial frame: 0
Location(5)
Position: 282, 130
Size: 96, 157
LocationNumber: 5
Layout: Observatory
Initial frame: 0
Location(6)
Position: 435, 90
Size: 201, 186
LocationNumber: 6
Layout: Watchtower
Initial frame: 2
Location(7)
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).
Location(9)
Position: 581, 352
Size: 100,100
LocationNumber: 9
Layout: MonsterDen
Initial frame: 0
Location(10)
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.