cocos2d for iPhone

A fast, easy to use, free, and community supported 2D game engine

1. 

   krstn
   Member

   Hi,

   I'm trying to use isometric map in my game and it gives me quite a headache today.
   I have to detect edges of the map and detect which tile was 'touched' by the player.
   It's a piece of cake with normal map with square tiles, in here however... damn... I just can't do it properly.

   Could anyone please tell me how to get the coordinates of a tile on an isometric map?
   I've found few methods to get the position using coordinates but somehow all the transformations of these methods I have made seem not to work properly...
   I've got X and Y of the touch and I have to get tile coords.

   Thanks in advance!

   Posted 1 year ago #
2. 

   Verisutha
   Member

   That's a fun one... I had to sit down with some graph paper and math and spend a while working it out, I wanted a simple solution that would work in all cases no matter the map size. Hope this saves you some time.

   I use multiple ISO map sizes and the touchToXY is in my base map class, it works no matter the map size it will always return the X,Y. Top most tile of the diamond being 0,0.

   Here is my solution:
   

   -(CGPoint)touchToXY:(CGPoint)touch map:(CCTMXTiledMap *)_map mapsize:(int)_mapsize
   {
   	touch = [[CCDirector sharedDirector] convertToGL:touch];
   	touch = [_map convertToNodeSpace:touch];
   	CGSize ts = [_map tileSize];
   	int isoy = (((touch.y/ ts.height) + (touch.x - (_mapsize * ts.width/2)) / ts.width) - _mapsize) *-1;
   	int isox = (((touch.y/ ts.height) - (touch.x - (_mapsize * ts.width/2)) / ts.width) -_mapsize) *-1;
   	return ccp(isox,isoy);
   }

   To call it:

   Variables you need to define are
   

   <CCTMXTiledMap> = Your Tile Map
   <MapWidthInTiles> = How big is the grid.  20 if it's 20x20, 30 if it's 30x30 etc..

   Call from your touch code:

   CGPoint myTouch = [touch locationInView: [touch view]];
   CGPoint isoXY = [self touchToXY:myTouch map:<CCTMXTiledMap> mapsize:<MapWidthInTiles>];

   Posted 1 year ago #
3. 

   krstn
   Member

   Wow!

   Thanks a lot Verisutha!
   So much effort to answer my question!
   I will certainly try it today!

   Thank you very very much!

   Posted 1 year ago #
4. 

   Verisutha
   Member

   Let me know how it works out for you.

   Posted 1 year ago #
5. 

   krstn
   Member

   Hi Verisutha,

   just got back to this issue of mine and pasted your code.
   It does not work as I would have expected.
   For example, for tile at 19,19 it gives me coordinates 20,-18.

   I will try to modify it, but if you have any clue how to change it let me know :)

   Thanks a lot for help!

   EDIT:

   uhm, I can see why coordinates are off.
   They are off because when I move the gane layer coordinates of map change [map is a child of gamelayer], so convertToNodeSpace will not work properly [that's my guess].
   Any thoughts?

   Posted 1 year ago #
6. 

   Verisutha
   Member

   I would have to see more of your code so I could reconstruct the issue.

   I need to see the code you are using the call the touchXY code. Just to make sure everything you are passing is correct. I use it for several maps, and some are even embedded within multiple layers.

   I have maps ranging in size from 6x6 -> 60x60, and for all of them the code functions.

   Also what is your tile size? I use isometric type tiles, as an example 64w x 128h.

   Posted 1 year ago #
7. 

   nickbit
   Member

   A more simplified version for the conversion of points:

   -(CGPoint) isoCoordsForPoint:(CGPoint)point {
   	float tw = tileSize_.width;
   	float th = tileSize_.height;
   	float mw = mapSize_.width;
   	float mh = mapSize_.height;
   
   	int posY = mh - point.x/tw + mw/2 - point.y/th;
   	int posX = mh + point.x/tw - mw/2 - point.y/th;
   
   	return (CGPointMake(posX, posY));
   }

   Posted 1 year ago #
8. 

   pepeu
   Member

   Thanks Verisutha! I've been struggling with this for a while, and your post gave me the nudge in the right direction. I am doing an isometric game in Flash/AS3 and having my "north" to the upper right side which needs the following code:

   var isoX:int = mapSize-(((mouseY/ tileHeight) + (mouseX - (mapSize * tileWidth/2)) / tileWidth) - mapSize) *-1;
   var isoY:int = mapSize-(((mouseY/ tileHeight) - (mouseX - (mapSize * tileWidth/2)) / tileWidth) -mapSize) *-1;

   I haven't started programming for iPhone yet, but hopefully I will soon. This seems like a good place to hang around when in need for help.

   Cheers!

   Posted 1 year ago #
9. 

   pepeu
   Member

   Hm, I went for trying out a "real" isometric view, when the height is no longer 2:1, but slightly higher. My tile for instance, are 15 x 8.3. So, the formula needs some tweaking. Any ideas/pointers/formulas? *lost*

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.