I have encountered an issue while working with hexagonal (staggered) tiles in Tiled.
I want to create a hexagonal tile map that is based on an existing map and - very important - maintains the proportions (width and height in pixels) of the original map.
I have created a TMX file from the original image using Shoebox. In Tiled map editor, I have turned the map into a hexagonal map and exported a JSON file for my project.
If possible, I would like to borrow the logic from the article below, where the tiles (pointy top) are slightly stretched in the vertical direction but the vertical distance between two tiles is smaller than the horizontal distance.
However, following this logic, due to the difference in vertical distance, the map becomes wider than the original map. To get the right proportions, I need to stretch the tiles even further in the vertical direction.
Is there a property in Tiled that I can change to get a more favorable result in this regard (keep the shape of the map AND tile shape)?
I understand if you can’t give me detailed instructions or input values based on this information, but maybe you can tell me if it is possible.
As an alternative, I am thinking about distoring the original map in such a way that the final drawing, based on the math from the article, will “undo” the first distortion and return the map to it’s original shape. But if the issue can be solved within Tiled that would of course be preferable.
I’m not entirely sure I understand the issue and what you mean by “created a [map] from the original image using Shoebox” - Shoebox creates tilesets, not maps, AFAIK? Did you create a hex tileset from an image and then use that to make a map in Tiled? And now you want to change the pixel size of the tiles while keeping the overall map the same size in pixels?
If I understood correctly: To keep (roughly) the same aspect ratio or pixel size of the map while changing the pixel size of the tiles, you will need to change the map dimensions (which are set in terms of tiles). This means you will lose (or gain) some tiles in the map, and since the map is sized in terms of tiles, you may not be able to keep the exact same size.
For example, if you start with 48x60px hex tiles with side length 30 and a 10x10 map, your map will be 504x465px or so in size. If you change the tile width to 52, your 10x10 map will now be 546x465px. If you resize the map to 9x10, it’ll be 494x465px, which is closer to the original dimensions, but still off.
The coordinate logic in the article you linked works for any size hexagon. They use regular hexagons (120 degrees all around) for simplicity, is that what you’re aiming for? For that, your dimensions for a pointy-topped hexagon are:
2*(cos(30°) * s) =
sqrt(3) * s, approximately
1.732 * s
2 * s
Overlap between rows:
s / 2
Offset for staggered rows:
width / 2 =
sqrt(3) / 2 * s, approximately
0.866 * s
So for example, if your side length is 30px, then the width is 52px and the height is 60px. Each row will overlap 15px of the previous row’s height, and staggered rows will be offset by 26px.
With Shoebox you can create tilesets but also TMX files. I used Shoebox to create a TMX file where every tile corresponds to a pixel in the original image. This is the issue I guess: that Shoebox assumes the tiles (like the pixels) are equal in width and height.
The original image is just a basic map with outlines of regions (imagine a map of Europe). The hexagonal pattern is added in Tiled.
If possible, I would like to keep the tile shape (based on the math in the article) while also keeping the proportions of the original image. But, as you point out, this only leaves the option to change the number of tiles…
If I want to keep using Shoebox, maybe the simplest option is to compress the original image horizontally to compensate for the larger horizontal distance between tiles.
Thank you very much for the quick reply. I will read it again tomorrow.
If your goal is to make a tiled version of an image using tiles, and if you already have a tileset, then perhaps this script I wrote a while back will help: tiled-scripts/ImageToMap.js at main · eishiya/tiled-scripts · GitHub
It’s pretty basic, and will require you to manually input what colours in the map correspond to what tile. Full instructions are in the comments at the top of the script. If you’re not familiar with Tiled scripts, you should read the Scripting section of the documentation: Scripting — Tiled 1.8.4 documentation