Isometric mouse calculation

  • 31 favourites

Attached Files

The following files have been attached to this tutorial:



Download now 173.46 KB


3,385 visits, 4,980 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.

Here's a demo of what it looks like.

In this tutorial we will use this grid as a tiled background.

This grid consist of 2 line group. A line can be formulated like this;

y = mx + b --> m is slope of the line in here

Of course depending on your drawing slopes can be different from this example

In this example first line's slope is -1/2, the second one's slope is 1/2. You can find a line's slope like this.

The important detail in here is y axis. In classic geometry y axis rises to up, but in construct 2 y axis rises down. So our formulas are like this;

y = -x/2 + b1 and y = x/2 + b2

x and y values will be changed depending on your mouse. But we need to find b1 and b2 values;

b1 = y + x/2 or b1 = Mouse.Y + Mouse.X/2

b2 = y - x/2 or b2 = Mouse.Y - Mouse.X/2

We also have a small grid sprite. For easy calculation move the origin

Depending on your grid, b1 and b2 values changes. You can check these values in debug. In this examples grid have 50 units range in both values

Our small grid sprite's origin point is on the left so we are targeting this point. Lets take a random point and investigate;

So we need to round b1 and b2 to multiples of 50 (remember that in a different picture 50 value will be changed).

For example

--> b1 = 170 you need to round it to b1target = 150

--> b1 = -170 you need to round it to b1target = -200

--> b2 = 240 you need to round it to b2target = 250

--> b2= -240 you need to round it to b2target = -200

To find the target values i used a formula like this. Be careful in possible negative values.

Do you remember our first formula

y = -x/2 + b1 and y = x/2 + b2

Now we have values like that

y = -x/2 + b1target and y = x/2 + b2target

The last step is finding the intersection point of two lines. If we equalize these two formulas we can find this point.

-x/2 + b1target = x/2 + b2target

x = b1target - b2target

y = -(b1target - b2target)/2 + b1target or y = (b1target - b2target)/2 + b2target

Final example is like that. You can also download capx.

I also write a sequal tutorial about z ordering on a isometric grid.



Download now 173.46 KB

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