VeryVariable: Mini-Map Interaction

Favourite 35 favourites
Tutorial written by jickayOriginally published on 29th, February 2012 - 1 revision

In the other tutorial we learned how to map the players position on a layout to a Mini-Map. Now we will take things one step further. Instead of just using the Mini-Map to display where the Player is we will also use it as an interactive part of the game.

What we will be doing is creating variables to store information based on the Mini-Map and apply it to the whole layout. More specifically we will use a mouse click on the Mini-Map to reposition the Player somewhere else on the layout.

With the Mini-Map already in place we will add the following variables and events.

First off, there are 2 global variables named mapclick_x and mapclick_y. These are used to store information about where the Mini-Map was clicked and where we want the Player to move to.

In the event, the actions are only activated when the mouse clicks over the object Map. When that happens the mapclick variables will be set to a specific formula.

Let's break down the parts of the formula.

(Mouse.AbsoluteX - Map.X)
This part gets the value of X relative to the map and not the layout. In the picture, when the mouse is at the position of the red arrow the AbsoluteX is 463 and the Map.X is 438. If we subtract AbsoluteX from Map.X we get 25, or the distance of the red line. This gives us where the Mini-Map was clicked relative to the position of the Mini-Map.

-AbsoluteX is used instead of just X because X is relative to the whole layout, but AbsoluteX shows the X position relative to the part of the layout you're looking at.
-Map.X is measured based on the top-left corner of the Mini-Map. Remember, in the previous tutorial we set the image point at this corner.

(Mouse.AbsoluteX - Map.X)/Map.Width
Next, we take this value and divide it by the width of the Mini-Map. This gives us the X value in a percentage format. Using the example in the picture, the red line would be 25 and the width of the Mini-Map is 180, so 25/180 is about 0.14. This means that the mouse is at 14% of the Mini-Map. If the mouse was at the left edge of the map it would be 0% and if it was at the right edge it would be 100%.

(Mouse.AbsoluteX - Map.X)/Map.Width * LayoutWidth
Now we want to take that percentage value and multiply it by the width of the layout. This translates the position clicked on the Mini-Map to the whole layout. So, since the value on the map was 0.14, or 14%, we also want to be at 14% on the layout. The layout width I have is 2500, so 14% of 2500 would be 350.

Going back to the whole event, the final actions will map the X position of the Player to this new number by setting it to mapclick_x. In our example, it would move the Player to 350 on the layout if you clicked on the Mini-Map where the red arrow is pointing. The same idea can be applied to the Y coordinate as well to move the Player anywhere you click on the Mini-Map.

Additional Notes

Also, note that in this example the game type is a platformer. This means 2 things:

1) That there is gravity
Since there is gravity if you reposition the Player in the air somewhere it will fall. The same happens if you position the Player over a hole or a pit.

2) The layout scrolls to the position of the Player.
This means wherever you click on the Mini-Map is where your Player will go, but also where you will view. If you didn't want the Player to move but you wanted to scroll when you clicked on the map you can replace the 'Set X/Y' action for the Player to a 'Scroll to' action for the System.

Various Ways to Use: Beginner

Teleport the Player
Move it wherever you want. Use it as part of the gameplay.
Teleport something else
Who says that you have the move the player? Maybe you could try moving other objects on the level.
Viewing Window
A viewing window could be used to view different parts of the level without moving any units around. A box over the Mini-Map could be added to indicate which part of the layout is being viewed.

Various Ways to Use: Advanced

Target Sites
When you click on the Mini-Map, instead of moving something or scrolling to that part of the layout the variables could be used to set a target. Maybe for missiles, maybe as a teleport exit, or to put up walls. There are many ways such a target site can be used.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!


farsmile90 10.9k rep

thank you, your tutorial is great !

Friday, March 02, 2012 at 3:39:05 AM
nicedwar 2,185 rep

Thanks for making this follow-up tutorial. I set my version up differently while you were working on this. I'll have to read this over a few times to compare and make some adjustments. My math was similar.
Using your setup sounds great for targeting as you mentioned at the end.

Friday, March 02, 2012 at 8:26:05 AM
natedj693 1,614 rep

and if we want to move there instead of transport?

Saturday, October 06, 2012 at 6:22:19 PM
LimonSpace 1,783 rep

hi all thanks for this tutorial,
I've a big big problem.
i try your solution but in my case it don't work.
i try with your settings and all gonna very well, but in my game i've a 15000px layout my minimap is at 1500 x and 1700 y , the size of the map is 360x 260 y the player tag on minimap is right the same position on x and y but i've a letterbox scale settings and the minimap interaction don't work.
i try with youre settings with a letterbox scale option active and don't work.
the problem is the letterbox scale option.
is there a way to make it work with this option activated?

my game is a space multiplayer game

thanks simone

Thursday, February 28, 2013 at 12:47:29 PM
JulioCezar 1,345 rep

Obrigado pelo tutorial me ajudou bastante.

Monday, July 01, 2013 at 9:58:34 PM
rexrainbow 164.6k rep


Tuesday, June 17, 2014 at 4:06:19 AM
Sparsha 208 rep

Well, this tutorial is not totally right... AbsoluteX/Y means the position of the mouse pointer respective to the whole screen size. It would not work with different screen sizes. Try browser zooming in/out while testing and then try "Mini-Map Interaction"...

Tuesday, May 15, 2018 at 6:46:39 PM
Sparsha 208 rep

But I don't get it......
"Mouse expressions
Return the position of the mouse cursor over the canvas area in the HTML page. This is (0, 0) at the top left of the canvas and goes up to the window size. It is not affected by any scrolling or scaling in the game."--- This is what the Manual says...

Tuesday, May 15, 2018 at 7:04:03 PM

Leave a comment

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