Here is a brief description of what I'm trying to accomplish. I created a 2d top down game that operated on a Cartesian plane and used some custom polygons to determine collisions and perform actions within the game engine.

I have converted the engine into a tiled isometric game and have got the majority of it working. I can translate the mouse click to the tile selected and can go back and forth between Cartesian coordinates and isometric tile coordinates. However, transforming some of my polygons is proving difficult. I need them to not only display correctly along the isometric plane but also to retrieve the adjusted coordinates in order to perform collision detection tests. I also need to accurately determine the "simulated" distance between a pair of points on the isometric plane.

Here is an examples to help clarify the situation a little bit:

example 1

This image is from the 2d top down game, with an isometric background to help clarify the issue. In this image you can see the green bounding box of a character in the game and the blue custom polygons used to simulate a sword swing. However in this image you can see that the bounding box and the sword swing polygons are still represented in the Cartesian plane.

example 2

This image is from the isometric game, with the Cartesian axis being represented by the red lines. They meet at point (0,0). There is a blue bounding box for the character that has now been transformed to fit the Isometric plane. To the bottom right you'll see a tile I selected outlined in green. Inside the tile are some points and lines that will be used to demonstrate the problem.

The teal letters represent coordinates and the red numbers represent lines. The distance (on the Cartesian plane) between B and F is 45 and the distance between H and D is 90. However, on the isometric plane the "simulated" distance (within the game) should be the same, in order to give the effect of a 3d environment.

Hopefully, that's enough information to get to the actual problem. What I need help with is deriving a formula for converting an angle and a "simulated" distance (on the isometric plane) to a Cartesian coordinate.

For example if given the coordinate of point A, the angle 0 and the distance of 45 you should get the Cartesian coordinates for the point D. Similarly if given the angle 90 and the distance of 45 you should get the point B. If given the angle 180 and the distance of 45 you should get the point H. If given the angle 270 and the distance of 45 you should get the point F.

Similarly if asked what the distance of point A to all of those points you should get 45 as the distance.

These examples wont necessarily transform the polygons but they will allow me to recreate them and the majority of my other custom polygons. Sorry if this doesn't make sense. If needed I'll try to clarify the problem more, just let me know what needs to be explained further.

Thanks for your time.

EDIT: if there is some type of transformation matrix that would accomplish this and be easier, I'm definitely open to that as well.

EDIT 2: using the answer provided by amd below I was able to get the answers needed. my isometric view was created by rotating an object 45 degrees and then scaling the y axis in half. In order to find the distance between the two points I simply needed to reverse the transformation and then determine the distance. also the formula provided by amd worked to determine a point given a distance and angle, however to fit my example i needed to change the 1/sqrt(3) into 1/2 and add 45 degrees to the angle provided before running it through the formula.

EDIT 3: here is an example of the finished product

final example

  • $\begingroup$ The isometric view looks a bit off to me. Are the segments $IE$ and $CG$ meant to be at “simulated” 45-degree angles? If so, then they should be parallel to $BD$ and $BH$, respectively. $\endgroup$ – amd Jan 6 '16 at 7:05
  • $\begingroup$ yeah they were supposed to be at 45 degrees, I did the points and lines around the green border in photoshop and it's not pixel perfect unfortunately. sorry about that. $\endgroup$ – Hussein Sabbagh Jan 6 '16 at 7:35

Angles and lengths can be introduced into a vector space by giving it an inner product. The familiar Euclidean scalar product $\mathbf u\cdot\mathbf v = \mathbf v^T\mathbf u$ defines lengths and angles via the well-known equations $\mathbf v\cdot\mathbf v=\|\mathbf v\|^2$ and $\mathbf u\cdot\mathbf v=\|\mathbf u\|\|\mathbf v\|\cos\theta$. We can define a different inner product $\langle\cdot,\cdot\rangle_A$ by choosing a positive-definite (symmetric) matrix $A$ and letting $\langle\mathbf u,\mathbf v\rangle_A=\mathbf v^TA\mathbf u$. The previous formulas can then be taken as defining lengths and angles relative to this new scalar product.

We can try to find a scalar product for the isometric view that has the desired properties. First note that we can get the isometric view from the top-down view via the transformation matrix $$ B=\pmatrix{1&0\\0&\frac1{\sqrt3}}.$$ This maps the circle $x^2+y^2=1$ onto the ellipse $x'^2+3y'^2=1$, so unit vectors in the isometric view must satisfy the latter equation. On the other hand, we have $\langle\mathbf u,\mathbf u\rangle_A = a_{11}x'^2+2a_{12}x'y'+a_{22}y'^2$, so we must have $$A=\pmatrix{1&0\\0&3}$$ as the matrix of the inner product.

This gives us the desired lengths in the isometric view, but we should also check that the angles look right. Taking the ellipse in the diagram as the image of the unit circle, $AC$ represents the image of the 45° line, i.e., the line parallel to $\left(\frac1{\sqrt2},\frac1{\sqrt2}\right)^T$. This is transformed into $\left(\frac1{\sqrt2},\frac1{\sqrt6}\right)^T$. Taking the inner product of this with $(1,0)^T$ and $\left(0,\frac1{\sqrt3}\right)^T$ (the images of the standard basis vectors) yields $\frac1{\sqrt2}=\cos\frac\pi 4$, which is what we wanted.

To produce a vector with a particular angle and length relative to this inner product, generate it in the top-down view first and then transform the resulting vector: $$ \pmatrix{1&0\\0&\frac1{\sqrt3}}\pmatrix{r\cos\theta \\ r\sin\theta}=\pmatrix{r\cos\theta \\ \frac r{\sqrt3}\sin\theta}. $$

The above all assumed that the isometric view was generated by looking down at the $xy$-plane and then tilting it away from the viewer so that $45°$ lines changed to $30°$. If you’re using some other isometric transformation, you can follow a similar procedure to compute a compatible inner product.

Here’s another way to compute the inner product matrix $A$ given the non-singular transformation $B$. We want $\langle\cdot,\cdot\rangle_A$ applied to the images of a pair of vectors under $B$ to equal their dot product, i.e., $$\begin{align} \langle B\mathbf u,B\mathbf v\rangle_A &= (B\mathbf v)^TAB\mathbf u \\ &= \mathbf v^T B^T A B \mathbf u \\ &= \mathbf v^T\mathbf u, \end{align}$$ so $A=(B^T)^{-1}B^{-1}=(BB^T)^{-1}$.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.