Hi all,
I looked into the code of the HTML5 version of the Cocos2d-x framework but I didn’t find a method to get tile (more precisely hexagonal tile) coordinate on touch.
So, after some search on the Internet, I found a tutorial on how to do this (http://www.gamedev.net/page/resources/_/technical/game-programming/coordinates-in-hexagon-based-tile-maps-r1800 written by Thomas Jahn). Unfortunately, this code was design for coordinate with a top-left origin and anti-clockwise 60 degrees rotated hexagonal tile.
So, I suggest an implementation working for me :
/* CONVERT TOUCH LOCATION TO HEXA TILE COORDINATE
* param touchLocation : touch location *param map : hexagonal tiled map
* @return : hexagonal tile coordinate
/
convertTouchLocationToHexaTileCoordinate:function {
//Vars
// Copy touchLocation cc.Point object to avoid in-param modification
px = new cc.Point;
px.x = touchLocation.x;
px.y = touchLocation.y;
// Returned var
pos = new cc.Point;
// Vars to determine hexa tile coordinate from touchLocation
section = new cc.Point;
pxInSection = new cc.Point;
a = map.getTileSize.height map.getScaleY();
b = map.getTileSize().width * map.getScaleX();
r = a / 2;
s = b / (2 * Math.sin(30 * Math.PI / 180) + 1);
h = (b - s) / 2;
// Convert touchLocation to tiled map reference (origin in the top-left corner) considering map offset
px.x = (px.x - map.getPosition().x);
px.y = ( map.getMapSize().height * ( map.getTileSize().height * map.getScaleY() ) ) - (px.y - map.getPosition().y);
// Determines touched section
section.x = Math.floor(px.x / (h + s));
section.y = Math.floor(px.y / (2 * r));
// Computes touch coordinate in section
pxInSection.x = px.x (h + s);
pxInSection.y = px.y (2 * r);
// According to touched section scheme, determines touched tile with touch coordinate in section
// Section A scheme (even)
if(section.x % 2 == 0) {
// touch coordinate in the top-left corner of the section
if( pxInSection.y < (r - (r / h) * pxInSection.x) ) {
pos.x = section.x - 1;
pos.y = section.y - 1;
}
// touch coordinate in the bottom-left corner of the section
else if(pxInSection.y > (r + (r / h) * pxInSection.x) ) {
pos.x = section.x - 1;
pos.y = section.y;
}
// touch coordinate in the right of the section
else {
pos.x = section.x;
pos.y = section.y;
}
}
// Section B scheme (odd)
else {
// touch coordinate in the left of the section
if( pxInSection.y < (2 * r - (r / h) * pxInSection.x)
&& pxInSection.y > ((r / h) * pxInSection.x) ) {
pos.x = section.x - 1;
pos.y = section.y;
}
// touch coordinate in the top-right of the section
else if(pxInSection.y < r) {
pos.x = section.x;
pos.y = section.y - 1;
}
// touch coordinate in the bottom-right of the section
else {
pos.x = section.x;
pos.y = section.y;
}
}
return pos;
}
I think it could make hexagonal tiled map management easier for developers.
Feel free to post comments or edit/correct this code.