Can anyone explain to me the theory behind this Isometric calculation?

Started by
6 comments, last by EndersGames 12 years, 10 months ago
Here's the source of a Twitter tweet.

Mouse pointer position to isometric tile coordinates:

xt=(y*2+x)/w;
yt=(y*2-x)/w;

How is it possible for such formula to work? All I can tell, is that the X and Y functions are based on the width of your program, not based on the height of your program, which to me, it's unbalanced. Shouldn't the isometric coordinates be based on the width and height of your program?

Thanks in advance to those who can help explain such ambiguity.
Advertisement
You might want to take a look at this http://www.tonypa.pri.ee/tbw/tut16.html .

PS. Google is your friend. You can use it to find algorithms and formulas for practically every case you might think of.

PPS. It's not width of the program. It's the width of your tile. Read the tutorial and you will understand.


You might want to take a look at this http://www.tonypa.pr.../tbw/tut16.html .

PS. Google is your friend. You can use it to find algorithms and formulas for practically every case you might think of.

PPS. It's not width of the program. It's the width of your tile. Read the tutorial and you will understand.





Um, please teach me how to search for the math theory behind that function via Google? Reason is given below.

Here's what I came across while searching in Google:

1. The difficulty of interpreting the information given from the Twitter tweet.
2. I do not know what each of the variables meant.

And like what you may have noticed, I guessed that the "W" meant width of your program, which gives me even more ambiguous search results. Now, that I have a clue (You told me the "W" meant the width of the tile), I can start my search.

Thanks for the clue.
They are just two lines of equations that don't work magic. There's a bit more of preparations beforehand. Did you read the tutorial from the link I provided? The calculations needed to convert screen coordinates to isometric coordinates are provided in there.

They are just two lines of equations that don't work magic. There's a bit more of preparations beforehand. Did you read the tutorial from the link I provided? The calculations needed to convert screen coordinates to isometric coordinates are provided in there.


Yes, I have read the article.

No, I think I must've not given the right question. What I meant to say is, when you want to search a math formula and its theory behind it, without having any knowledge to what that math formula is all about prior to searching, what is the trick to searching for these information when using Google? How do come up with the search term that I could easily apply and get the results what I wanted if given a math formula yet there's not much information to be conveyed from?

[quote name='BaltazarDZ' timestamp='1305291967' post='4810187']
They are just two lines of equations that don't work magic. There's a bit more of preparations beforehand. Did you read the tutorial from the link I provided? The calculations needed to convert screen coordinates to isometric coordinates are provided in there.


Yes, I have read the article.

No, I think I must've not given the right question. What I meant to say is, when you want to search a math formula and its theory behind it, without having any knowledge to what that math formula is all about prior to searching, what is the trick to searching for these information when using Google? How do come up with the search term that I could easily apply and get the results what I wanted if given a math formula yet there's not much information to be conveyed from?
[/quote]

the way google works is it's just a big answer machine. for example, say I've got my isometric tile engine working, but I don't know how to make tiles selectable by mouse:
how to get mouse position in isometric map

and I get loads of results with the answer.

now say I want to go back to basics and get the theory behind isometrics. All I know is its a view called isometric- isometric view
the first result is a wikipedia article - with loads of background on the theory - http://en.wikipedia.org/wiki/Isometric_projection

it all really snowballs from there. even if you only have the vaguest clue about a topic you can google it. you just have to have the patience.
Try this?
Well, i am not sure about that calculation, but here is how I do it in my game.

to draw the tiles on screen, my tiles are 64x64



// TileX and TileY are the array locations of the tiles.
// TileWidth is set to 64 pixels wide.
// TIleHeight is set to 32 pixels high.
// The graphic tiles are 64x64

// ScreenX and ScreenY is the location to draw the tile.
// OffsetX and OffsetY offset the drawn tiles to center the display.

ScreenX = OffsetX + TileY*TileWidth/2 + TileX*TIleWidth/2;
ScreenY = OffsetY - TileX*TIleHeight/2 + TileY*TileHeight/2;



going from mouse position to iso position was a little difficult to do. But I implemented a quick and dirty way of getting good results.



// TileX and TileY are the array locations of the tiles.
// TileWidth is set to 64 pixels wide.
// TIleHeight is set to 32 pixels high.
// The graphic tiles are 64x64

// In my game, i adjusted the mouse location so it will detect the correct tile that is under the mouse.
MouseX = Mouse.getX()+16;
MouseY = Mouse.getY()-40;

// get the Offsets to calculate the correct tile.
OffsetX = dungeonView.getViewDeltaX();
OffsetY = dungeonView.getViewDeltaY();

// use reverse math to get the grid of every other tile.
MapX = (int) (MouseX/TileWidth - OffsetX/TileWidth - MouseY/TIleHeight + OffsetY/TIleHeight);
MapY = (int) (MouseX/TileWidth - OffsetY/TileWidth - OffsetY/TIleHeight + MouseY/TIleHeight);

// get screen locations of that tile.
ScreenX2 = OffsetX + MapY*TileWidth/2 + MapX*TIleWidth/2;
ScreenY2 = OffsetY - MapX*TIleHeight/2 + MapY*TileHeight/2;

// This check here will give a quick and dirty check to see what part of the mouse is in the tile.
// If it is in the first or last quarter of the x axis, it will check to see what the adjacent tiles are and change accordingly.

if((MouseX-ScreenX2)<TileWidth/4+16){
if((MouseY-ScreenY2)<TileHeight/4*3-40){
MapY = MapY - 1;
}else{
MapX = MapX - 1;
}
}else if((MouseX-ScreenX2)>TileWidth/4*3+16) {
if((MouseY-ScreenY2)<TileHeight/4*3-40){
MapX = MapX + 1;
}else{
MapY = MapY + 1;
}
}



And these are the results of my game. My game is being programmed in Java for Android using libGdx at the graphics library.

248385_10150191528492172_119835977171_7420706_3951934_n.jpg

This topic is closed to new replies.

Advertisement