CODEWITHSUNDEEP
javamathtransformisometric
CosmicGiant
CosmicGiant

Reputation: 6441

What's the math behind transforming mouse location for games with diamond-shaped tiles?

I am developing a axonometric (isometric, but with an angled view) tile-based game.

I have the tile system working just fine, and now i'm moving on to the input issues.

The tiles are not visually matching (unaligned/offsetted diamonds) with the logic behind them (array).

Between the many methods i found with my "google-fu", applying a transformation ("rotation") to the input seems to be one that is (code-amount-wise) easy to implement as well as good performance-wise.

The problem is, for all the sources i found, i can't really grasp what numbers are coming from where, nor what the formula is doing with/to them.

So, i'd like an explanation of the math formula for "Affine transformation" (if this is it's name, because i'm not sure...)

@Yochai_Timmer 's answer to this question is what i want to use, but i don't understand where the values are coming from (mostly*), nor what is being done to them.

[mostly*]: "28" is half a tile's width and full-height, "14" is half-height, and "56" is full-width...probably...but that's pretty much all i got from it, so correct or not, i'm still stuck anyway.

In case it helps you give me a clearer answer, my own tiles are 80 width by 46 height, and i'm applying (rendering) them with the same method (top-right corner of tile 1x2y is located at the center of tile 1x1y, and so on...)

Also, what i'm using is Java and the API is Slick2D. So if you know any hidden functions/classes that help in the formula's math (ex: Math.sen(), Math.cos(), ...), or the issue in general, you are welcome to point them out too, as it might help me a lot.

Upvotes: 3

Views: 555

Answers (1)

templatetypedef
templatetypedef

Reputation: 372814

The key idea behind the transformation is to think of the tiles as normal rectangles having undergone a linear transformation. To understand this, suppose that you begin with a normal square, like this one:

  +-----+
  |     |
  |     |
  +-----+

Given this square, you can think of two vectors that define what "up" and "right" mean by just taking two sides of the square:

  +-----+     ^
  |     |     |
  |     |     |
  +-----+     +----->

Let's call these vectors i and j. You can imagine transforming this square into a diamond by rotating and skewing the square. If you do this, you can think about what happens to those two vectors i and j:

   /\          ^
  /  \        /
 /    \      /
 \    /      \
  \  /        \
   \/          >

Notice how i and j have been rotated and scaled a bit.

The trick behind the math to determine what square a point is in under the projection is to try to reverse this process. Instead of starting with a normal i and j vector and ending with the skewed/rotated ones, you start off with the skewed/rotated i and j vectors, then try to under the transformation to convert the world back into a nice square grid. The calculations you perform work by saying "given that the mouse is at position (x, y) in the projection, what coordinate (x', y') would it have if we undid this transformation?" All the math behind this is standard linear algebra to convert between two coordinate spaces. For a description of how to do this, consider reading this Wikipedia article on transformation matrices, which describe how this process works.

Hope this helps!

Upvotes: 3

Related Questions