4
\$\begingroup\$

I find in general map creation that I prefer hex grids for natural environments, but square grids for interior and urban/constructed environments.

Is there a smooth or elegant way to transition between these that doesn't require a scene break? Most importantly, is there an intuitive way?

As long as they don't differ too vastly, the ratio of sizes between the two cell types is largely irrelevant to me. I'd also happily use several rows of transitional tiles if their borders can be procedurally determined. I also have no inherent preference for up-point or side-point hexes...

I'd show some things I've already tried, but they are genuinely all varieties of the same eldritch mess...

\$\endgroup\$
6
  • \$\begingroup\$ Waht's the genre? Do you need pathfinding? \$\endgroup\$ Apr 12 at 12:36
  • \$\begingroup\$ @ShadowsInRain Grid Tactics, and yes, but I don't see how either of those is entirely relevant to what amounts to a visual design question? \$\endgroup\$
    – Weckar E.
    Apr 12 at 14:04
  • \$\begingroup\$ I am trying to understand your limitations. Are you working with sprites or 3d models? \$\endgroup\$ Apr 12 at 14:06
  • \$\begingroup\$ @ShadowsInRain I am working with a flat plane. I haven't decided on whether the final project will be 2d or 3d yet. I am sorry, I just don't understand the relevance. How space will be distributed on a plane has nothing to do with models or sprites, or any form of specific visual technical implementation. It could be a board game and I'd suffer the same problem. \$\endgroup\$
    – Weckar E.
    Apr 12 at 14:11
  • \$\begingroup\$ There is certainly a way that looks intuitive and even obvious to me, so I am assuming there are some requirements that I am missing. Why scene break, what is wrong exactly? See, screenshots or drawings would help immensely. \$\endgroup\$ Apr 12 at 14:32
2
\$\begingroup\$

As long as they don't differ too vastly, the ratio of sizes between the two cell types is largely irrelevant to me. I'd also happily use several rows of transitional tiles if their borders can be procedurally determined. I also have no inherent preference for up-point or side-point hexes...

This paragraph made me think of another, more universal solution: Voronoi diagram. It could adapt to and transition between any kind of grids.

Here's example that joins together hexagonal grid with square grid and uneven terrain:

enter image description here

Please don't mind the terrain cells being too big, contrary to what's proposed in the answer. The tool to make the diagram wasn't very convenient.

The obvious downside is that Voronoi diagram would probably require (more of) manual setup. But most of it can be automated with proper tooling (and to stitch the grids, you'll need the tooling anyways, I presume):

  • constraints may be set to keep cells' sizes reasonable
    • perhaps even automatically splitting cells that are too big
  • mark "open-ended" (touching the level's bounds) cells impassable by default
  • designate areas where the diagram should self-stabilize to particular type of grid with given orientation
    • pentagonal grid, anyone?
  • a tool to flood-fill transition terrain
  • custom shapes to define walls and other kinds of obstacles
  • etc
\$\endgroup\$
7
\$\begingroup\$

This is most intuitive way that I can think of.

enter image description here

\$\endgroup\$
6
  • \$\begingroup\$ Do your solution is to make the square grid not quite square? Or to squash the hexes a bit? Because normally the width and height of a proper hex are not the same... \$\endgroup\$
    – Weckar E.
    Apr 12 at 15:12
  • 2
    \$\begingroup\$ @WeckarE. Yes, either of those has to be stretched, perhaps both. This may be somewhat masked with a camera angle. Not going to work in 3d, but there is different solution for 3d. \$\endgroup\$ Apr 12 at 15:27
  • \$\begingroup\$ Interesting approach. I had not considered deformation of the map as a whole as an option yet :) \$\endgroup\$
    – Weckar E.
    Apr 12 at 15:28
  • \$\begingroup\$ @WeckarE. Also, you could hide cells' borders and mark only cells' centers, and decorate misaligned cells (e.g. with barrels and cellars and chimneys and whatnot). I think it would look pretty convincing. \$\endgroup\$ Apr 12 at 15:32
  • 1
    \$\begingroup\$ @WeckarE. You could adjust the deformation subtly based on how many squares vs hexes are visible. So in the middle of a square grid it's square, and in the middle of a hex grid it's hexy \$\endgroup\$
    – user253751
    Apr 14 at 17:03
1
\$\begingroup\$

You can create a hexagonal pattern with square tiles by creating each logical tile from 2x2 technical tiles and then arranging them in a staggered pattern like this:

hex tile arrangement on square grid

This might, however, require quite a lot of transition tiles. But if your engine allows tiles which are larger than the technical grid size, then you can design tiles like this:

tile designed for square grid

The overlapping parts of each tile fit into the transparent part of the tiles below/above.

\$\endgroup\$

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.