0
\$\begingroup\$

I have a staggered hexagonal map created with "tiled" map editor and I want to calculate the height of this map in pixels, the example map below should be MAP_WIDTH_IN_PX = 1056 and MAP_HEIGHT_IN_PX = 303;

enter image description here

MAP_WIDTH = map.getProperties().get("width",Integer.class); //16 tiles
MAP_HEIGHT = map.getProperties().get("height",Integer.class); //5 tiles
TILE_WIDTH = map.getProperties().get("tilewidth",Integer.class); //64px
TILE_HEIGHT = map.getProperties().get("tileheight",Integer.class); //84px
TILE_SIDE_LENGTH = 27; //this value is set in the map editor


MAP_HEIGHT_IN_PX = ?;
MAP_WIDTH_IN_PX = MAP_WIDTH * TILE_WIDTH + TILE_WIDTH * 0.5f;
\$\endgroup\$
2
\$\begingroup\$
  1. The height of each individual hexagon is 84px including shadow but the shadow only matters for the last row. So we need to know the size without shadows. I believe the height of the hexagon without shadow is 73px.

  2. For all rows except the last row, there is overlap in heights by 1/4 of the hexagon height. The second row starts at 3/4 of the hexagon height. (diagram from my page)

Hexagon size and spacing diagram

  1. This means for all rows except the last row, we want to count only 3/4 of the hexagon height without shadows: 3/4 * 73px * 4 rows = 219px. Then we need to add the last row, which will be full height including the shadow: 84px. The sum of these is 219px + 84px = 303px.
\$\endgroup\$
0
\$\begingroup\$

Just check even and odd number of tiles in column, than half of them take tile height space and half tile width space. In case of odd number take care of last one.

if (MAP_HEIGHT%2==0) 
  MAP_HEIGHT_IN_PX = MAP_HEIGHT/2*TILE_SIDE_LENGTH +MAP_HEIGHT/2*TILE_HEIGHT;
else 
  MAP_HEIGHT_IN_PX = (MAP_HEIGHT-1)/2*TILE_SIDE_LENGTH +(MAP_HEIGHT+1)/2*TILE_HEIGHT;

Also we need to subtract part of tile shadow for long (for example 1px).

if (MAP_HEIGHT%2==0) 
  MAP_HEIGHT_IN_PX = MAP_HEIGHT/2*TILE_SIDE_LENGTH +MAP_HEIGHT/2*(TILE_HEIGHT-1);
else 
  MAP_HEIGHT_IN_PX = (MAP_HEIGHT-1)/2*TILE_SIDE_LENGTH +(MAP_HEIGHT+1)/2*(TILE_HEIGHT-1);
\$\endgroup\$
  • \$\begingroup\$ Your code won't result in 303 but 380 so it doesn't work. \$\endgroup\$ – Ocelot Sep 7 at 10:56
  • \$\begingroup\$ I have upgraded to TILE_SIDE_LENGTH instead Tile_Width! It is still not 100% (306px). For missing 3px. It can be that problem is bottom shadow (so you need to also subtract something like ) (MAP_HEIGHT-1)/2*1px \$\endgroup\$ – MatejC Sep 7 at 11:07

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.