VeryVariable: Mapping Where the Player is in the Layout

  • 38 favourites


2,351 visits, 3,773 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.

Sometimes a map can be a useful thing. Levels all vary in size so you never quite know when you're close to the end of a stage. One way to solve this is to provide a simple little indicator.

Here I have my basic layout. The big square is the 'Player' complete with Platform and ScrollTo behavior. The long rectangles are the platforms and they have a Solid behavior. The grey bar at the top is the 'Map'. The little square beside it will be used to represent the 'MapIcon' used to represent the player. I set the size of the MapIcon to be the same as the height of the Map so that it fits properly.

It is important to place the Map and MapIcon on a separate layer. This is because we will set the parallax for this layer to 0,0. This makes sure the Map stays in view instead of scrolling like the platforms.

Also, because the Map doesn't move wherever you place it on the layout is where it will stay. As for the MapIcon, we will tell it where to go using events, so it just has to be on the layout somewhere.

We also have to set the image point of the Map to the left end like this.

This is so the left side of the Map will be the beginning and the MapIcon will move to the right as you progress. The event calculations are also based on this position so it is important to set this up before continuing.

Next we will set the following events.

The first action tells the MapIcon to be at the same Y position as the Map at all times. The second action sets the X position of the MapIcon relative to the Player position on the layout.

If we break it down (Player.X/LayoutWidth) gives the percentage of the Player position relative to the layout. If the layout is 1000px and the Player is at 500px then it will be equal to 0.5 or 50% of the layout. The Map.Width is multiplied by this percentage to translate this percentage into the percentage of the Map. If the Map is 200px long then 50% of 200 will be 100. This number is then added to the X position of the Map on the layout. Remember, this is calculated based on the image point mentioned above.

Test it out and see the indicator move as you run through the level.

Bonus Tips

This technique can be taken a step further and add the Y component into the map. All you have to do is make three changes. 1) Expand the Map from a thin bar into a rectangle. Whatever size makes you happy. 2) Move the image point of the Map to the top-left corner. X is calculated from left to right, but Y is calculated from top to bottom. This is why we need the image point to be at the top rather than the bottom.

And, 3) we need to change the events for the Y position to mimic what we did for the X position.

Test it again and now the MapIcon jumps and falls just like the Player does except in a smaller version in the Map.

It is also probably a good idea to make the Map transparent so that it doesn't block out the actual layout. If you might have noticed my entire demo was made using just a black bar for all the sprites. For the map I just set the opacity to 35.

The way this map is currently set up both the Map and MapIcon can be set to any size and the position of the Player will still be properly calculated.

Various Ways to Use: Beginner

Detailed mini-map

Right now it is set up to be just a box to represent the stage, but mini versions of the platforms could be added to make the Map even more accurate.

Mapping enemies

Who said only the hero gets to be mapped?

Various Ways to Use: Advanced

Light the way

If you really want to push things a cone of visibility could be added to the map. A top-down stage for example could show when enemies could see you or when they have their back turned.

Messing around

To mix things up the Map could be distorted on certain stages to throw the gamer off. Maybe it goes in reverse or upside-down, or maybe it's just static so they don't know what's coming.


  • Order by
Want to leave a comment? Login or Register an account!