1
\$\begingroup\$

So as the headline suggests, I am looking for an algorithm/algorithms used for square-to-hex and hex-to-square pixel coordinates convertion.

I have an image which looks kinda "interpolated", meaning some pixels are of one colour, while some have a slightly different shade etc. So pixel colour kinda stores offset or whatever. If you're interested, it's here

It has to do with pathfinding, the logical part of map is made of hexmap while the visual part of map is made of squares. Here, size of the square = 1 pixel, same hex size is equal to 1 pixel.

So basically I will be trying to convert an image with hex pixel coords to image with square pixel coords and vise versa.

I'm sorry if this was answered already somewhere, I couldn't find it anywhere.

P.S. I reverse engineered the image, so in binary it was only X and Y coords stored plus a third byte value which I took as a greyscale colour (later compared with another image and it matched)

Image: Image

\$\endgroup\$
4
  • 2
    \$\begingroup\$ I'm having difficulty understanding your question. Could you elaborate please? You have an image which you also linked, which is square (regardless of its contents) and you are trying to turn that into a hexagonal shape? Is that what the question is about? I'm not sure I understand what "size of the square = 1 pixel, same hex size is equal to 1 pixel" means. Could you describe what's the end goal? What do you want your game to look like at the end, and why did you pick this process? \$\endgroup\$
    – Tom Tsagkatos
    Commented Jul 29, 2018 at 14:49
  • \$\begingroup\$ @TomTsagk yes im sorry for being unclear. So that image is hex-to-pixel image. It means it originated as square to pixel image and then square coordantes were converted into hex coordinates and then hex coordinates were put into image - hence hex-to-pixel. So a a result of putting hexes to pixel we have different pixels have various colours ranged from 1 to 64 (in greyscale), so I thought it might be some kind of alpha or weight \$\endgroup\$
    – Mr Jox
    Commented Jul 29, 2018 at 16:33
  • \$\begingroup\$ I'm unable to view this image on mobile. Can you embed it in the question itself rather than linking to Imgur? \$\endgroup\$
    – DMGregory ♦
    Commented Jul 29, 2018 at 17:42
  • \$\begingroup\$ @DMGregory done \$\endgroup\$
    – Mr Jox
    Commented Jul 29, 2018 at 17:53

1 Answer 1

Reset to default
1
\$\begingroup\$

Convert in-hex coordinates to screen space and work therein, as that is the common pixel space.

To know where your pixel-in-a-hex is in screen space, just get the hex's offset (which I presume you have specified?) from top left (or bottom left in OpenGL) of the screen, then get your pixel offset into the hex (multiplying by scale if you are zoomed out or in - i.e. not rendering at 1:1 scale), and add them. That gives you your screen-space co-ords.

To go back to hex space from screen space, reverse the process: Subtract the hex's offset from the coordinates, and divide by scale.

\$\endgroup\$
3
  • \$\begingroup\$ could it be that the greyscale colour of the image above is the offset you're referring to? I noticed it ranges from 1 to 64 (min and max values), and the scale could be just 1 pixel, right? Sorry Im just too new to it \$\endgroup\$
    – Mr Jox
    Commented Jul 29, 2018 at 16:37
  • \$\begingroup\$ also in what direction do I offset? X? Y? Vector summ of X & Y? \$\endgroup\$
    – Mr Jox
    Commented Jul 29, 2018 at 16:59
  • \$\begingroup\$ @MrJox I believe that depends on your specific setup. \$\endgroup\$
    – Draco18s no longer trusts SE
    Commented Nov 12, 2018 at 15:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .