Mapping X/Y coords to isometric coords
Greetings,
I'm writing my first isometric style game and found some helpful articles on GameDev, but now I gotten stuck...
How do I mathematically convert the values from a two dimensional array against the tiles in my isometric map? Let's say I got the following array:
0 1 2 3 4
0 . . o . .
1 . o o o .
2 . . o . .
3 . . o . .
4 . . . . .
I want to loop through this array and paint each "o" onto the map accordingly - but the iso coordinates doesn't match the simple x/y coordinates in the array.
In other words: How do I calculate the iso x/y coordinates based on the x/y coordinates in my array?
Any help would be greatly appreciated.
if I understand correctly,thats the array with tile indexes.
Lets say you have the tiles in
BITMAP tiles[100];
and have a function that puts bitmap on screen
blit(bitmap_source,x,y);
You know the tile width/height in
int tile_w,tile_h;
to draw the map you need double loop,once for the rows,and once for the columns.
for(i=0;i<rows_on_map;i++)
for(j=0;j<columns_on_map;j++)
blit(times[map_array[j]],i*tile_w,j*tile_h);
maybe you'll have to swap x/y ,sory for the poor/short explaination but i'm in a hurry hope this'll help you .
Lets say you have the tiles in
BITMAP tiles[100];
and have a function that puts bitmap on screen
blit(bitmap_source,x,y);
You know the tile width/height in
int tile_w,tile_h;
to draw the map you need double loop,once for the rows,and once for the columns.
for(i=0;i<rows_on_map;i++)
for(j=0;j<columns_on_map;j++)
blit(times[map_array[j]],i*tile_w,j*tile_h);
maybe you'll have to swap x/y ,sory for the poor/short explaination but i'm in a hurry hope this'll help you .
Quote:Original post by Winterhell
if I understand correctly,thats the array with tile indexes.
Lets say you have the tiles in
BITMAP tiles[100];
and have a function that puts bitmap on screen
blit(bitmap_source,x,y);
You know the tile width/height in
int tile_w,tile_h;
to draw the map you need double loop,once for the rows,and once for the columns.
for(i=0;i<rows_on_map;i++)
for(j=0;j<columns_on_map;j++)
blit(times[map_array[j]],i*tile_w,j*tile_h);
maybe you'll have to swap x/y ,sory for the poor/short explaination but i'm in a hurry hope this'll help you .
Thanks for your answer but the looping isn't the problem. The problem has to do with the mapping between the coordinates in my array and the way they are diaplayed in the iso map.
If I want do display 6 bitmaps on the iso map according to my ascii illustration, I cannot place them at the same coordinates as in my array due to the fact that the iso map has a compleatly different logic as to determine which tiles are adjacent (depending on whether the y coord is odd or even).
I need a method that takes translates a "simple" x/y coord into an isometric one, something like:
Point ConvertTileIndexToIsoIndex(Point tileIndex)
{
// ...
return new Point(x, y);
}
But I need help to make that conversion...
Thanks!
I used to do some iso work in flash some times ago. Hope this help.
to set isometric tile position :
for (var x = 0; x for (var y = 0; y
if(!((x==this.Width-1) && (y%2)))
{
this.Cases[y*this.Height+x] = _root.gameboard.attachMovie(”tile2″, “t_”+x+”_”+y, _root.gameboard.getNextHighestDepth());
this.Cases[y*this.Height+x]._x = (x)*this.TileSize+((y%2)*this.TileHeight)+this.OffsetX;
this.Cases[y*this.Height+x]._y = (y)*this.TileSize/4+this.OffsetY;
this.Cases[y*this.Height+x].p.text = x + “,” + y;
}
}
}
and to get tile at screen position
function ScreenToTile(xa:Number, ya:Number){
var x = Math.floor((xa - this.OffsetX) / this.TileSize);
var y = Math.floor((ya - this.OffsetY) / this.TileHeight); var modx = 0;
var mody = 0;
if(xa-this.OffsetX-(x*this.TileSize) > (2*(ya - this.OffsetY-y*this.TileHeight))){
if(xa-this.OffsetX-(x*this.TileSize) < 2*(this.TileSize/2-(ya - this.OffsetY-y*this.TileHeight))){
mody--;
}
else {
x++;
}
}
else {
if(xa-this.OffsetX-(x*this.TileSize) < 2*(this.TileSize/2-(ya - this.OffsetY-y*this.TileHeight))){
}
else {
y++;
mody--;
}
}
return new classes.core.CPoint(x, y*2+mody);
}
[Edited by - j0hn on September 16, 2006 6:21:24 AM]
to set isometric tile position :
for (var x = 0; x for (var y = 0; y
if(!((x==this.Width-1) && (y%2)))
{
this.Cases[y*this.Height+x] = _root.gameboard.attachMovie(”tile2″, “t_”+x+”_”+y, _root.gameboard.getNextHighestDepth());
this.Cases[y*this.Height+x]._x = (x)*this.TileSize+((y%2)*this.TileHeight)+this.OffsetX;
this.Cases[y*this.Height+x]._y = (y)*this.TileSize/4+this.OffsetY;
this.Cases[y*this.Height+x].p.text = x + “,” + y;
}
}
}
and to get tile at screen position
function ScreenToTile(xa:Number, ya:Number){
var x = Math.floor((xa - this.OffsetX) / this.TileSize);
var y = Math.floor((ya - this.OffsetY) / this.TileHeight); var modx = 0;
var mody = 0;
if(xa-this.OffsetX-(x*this.TileSize) > (2*(ya - this.OffsetY-y*this.TileHeight))){
if(xa-this.OffsetX-(x*this.TileSize) < 2*(this.TileSize/2-(ya - this.OffsetY-y*this.TileHeight))){
mody--;
}
else {
x++;
}
}
else {
if(xa-this.OffsetX-(x*this.TileSize) < 2*(this.TileSize/2-(ya - this.OffsetY-y*this.TileHeight))){
}
else {
y++;
mody--;
}
}
return new classes.core.CPoint(x, y*2+mody);
}
[Edited by - j0hn on September 16, 2006 6:21:24 AM]
when i was doing this i drew them all in a square formattion then i altered there position a bit, recompiled, run, look, eventually through trial and error i figured out how to do it.
Then i reversed the computation to get screen to array.
However if your tiles have different heights i think you need to be more inventive.
Then i reversed the computation to get screen to array.
However if your tiles have different heights i think you need to be more inventive.
Quote:Original post by Riviera Kid
when i was doing this i drew them all in a square formattion then i altered there position a bit, recompiled, run, look, eventually through trial and error i figured out how to do it.
Then i reversed the computation to get screen to array.
However if your tiles have different heights i think you need to be more inventive.
Interesting, you wouldn't happen to have that code lying around would you?
Thanks
XoffsetX = (arrayposX/2)*tilewidth + (arrayposX%2)*tilehalfwidth
XoffsetY = -(arrayposX/2)*tileheight - (arrayposX%2)*tilehalfheight
YoffsetX = -(arrayposY/2)*tilewidth - (arrayposY%2)*tilehalfwidth
YoffsetY = -(arrayposY/2)*tileheight - (arrayposY%2)*tilehalfheight
screenposX = screenoffsetX + XoffsetX + YoffsetX
screenposY = screenoffsetY + XoffsetY + YoffsetY
screenposX = screenoffsetX + (arrayposX-arrayposY)/2*tilewidth - (arrayposX-arrayposY)%2*tilehalfwidth
screenposY = screenoffsetY - (arrayposX+arrayposY)/2*tileheight - (arrayposX+arrayposY)%2*tilehalfheight
Depending on how you want your coordinate system set up, you might have to change some values, but this should give you an idea of the math. The current coordinate system has X pointing down right and Y pointing down left (the isometric one that is).
Hope it helps
[Edited by - Necator on October 5, 2006 8:42:28 AM]
XoffsetY = -(arrayposX/2)*tileheight - (arrayposX%2)*tilehalfheight
YoffsetX = -(arrayposY/2)*tilewidth - (arrayposY%2)*tilehalfwidth
YoffsetY = -(arrayposY/2)*tileheight - (arrayposY%2)*tilehalfheight
screenposX = screenoffsetX + XoffsetX + YoffsetX
screenposY = screenoffsetY + XoffsetY + YoffsetY
screenposX = screenoffsetX + (arrayposX-arrayposY)/2*tilewidth - (arrayposX-arrayposY)%2*tilehalfwidth
screenposY = screenoffsetY - (arrayposX+arrayposY)/2*tileheight - (arrayposX+arrayposY)%2*tilehalfheight
Depending on how you want your coordinate system set up, you might have to change some values, but this should give you an idea of the math. The current coordinate system has X pointing down right and Y pointing down left (the isometric one that is).
Hope it helps
[Edited by - Necator on October 5, 2006 8:42:28 AM]
Quote:Original post by Necator
XoffsetX = (arrayposX/2)*tilewidth + (arrayposX%2)*tilehalfwidth
XoffsetY = -(arrayposX/2)*tileheight - (arrayposX%s)*tilehalfheight
YoffsetX = -(arrayposY/2)*tilewidth - (arrayposY%2)*tilehalfwidth
YoffsetY = -(arrayposY/2)*tileheight - (arrayposY%s)*tilehalfheight
screenposX = screenoffsetX + XoffsetX + YoffsetX
screenposY = screenoffsetY + XoffsetY + YoffsetY
screenposX = screenoffsetX + (arrayposX-arrayposY)/2*tilewidth - (arrayposX-arrayposY)%2*tilehalfwidth
screenposY = screenoffsetY - (arrayposX+arrayposY)/2*tileheight - (arrayposX+arrayposY)%2*tilehalfheight
Depending on how you want your coordinate system set up, you might have to change some values, but this should give you an idea of the math. The current coordinate system has X pointing down right and Y pointing down left (the isometric one that is).
Hope it helps
What does your variable "s" refer to?
Thanks
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement