• Register
Post news Report RSS First Post

Using a hexagonal-grid for wilderness maps in combination with a square-grid for dungeon maps creates a great effect, but comes at a surprising cost on low-end consoles like the FireTV that don't support analogue input.

Posted by on

Red Box Edition of Isle of Dread Cover

In 1961, Avalon Hill founder Charles Roberts changed game design by switching his game Gettysburg from a square grid design to a hex design, introducing hexes to commercial wargaming. -Jon-Paul Dyson Twitter.com

As implied in the summary, this game is all about recreating that classic RPG feel, and to my mind, very little is as classic as those original D&D modules like the "The Isle of Dread".

And one of the great memories we all have of those old D&D modules is the balance between the hex-grid for wilderness maps combined with square-grid for the dungeons.

For me, what's great is that the hex-grid helps give a more natural aesthetic to the topology, while the square-grid allows for 90-degree angles found in homes, castles, and dungeons.

Isle of Dread Hex MapWarrek's Next Square Grid Map


The primary advantage of a hex map over a traditional square grid map is that the distance between the center of each and every pair of adjacent hex cells (or hex) is the same. By comparison, in a square grid map, the distance from the center of each square cell to the center of the four diagonal adjacent cells it shares a corner with is greater than the distance to the center of the four adjacent cells it shares an edge with. - En.wikipedia.org

The first choice was to go with "flat top" or "point top" hexagons. And more than anything else, simply to match the style of the old D&D adventures, I went with "point top". Sometimes it's best to not too much thought into game design decisions.. and if you're lucky you won't regret it.

flat top hexagon point top hexagon


So that is the basis for what we have happening in this game as you can see in early development screenshots below. (Please forgive the "programmer art"... early days after all.)

Game: Wilderness Hex Grid Castle Square Grid


However, there are good reasons that most classic Computer RPGs didn't have a hex grid. It really just make things a little more complicated (pathfinding math, UI, and input)... more on pathfinding math in a later post.

Wikipedia lists very few hex-based computer games prior to the advent of the mouse (even Sid Meyer's original Civilization was square grid)... and I point this out because of the primary disadvantage of the Hex-grid conflicts with the classical arrow-key driven PC game input.

One disadvantage of a hex map is that hexes have adjacent cells in only six directions instead of eight, as in a square grid map. Commonly, cells will form continuous straight lines "up" and "down", or "north" and "south", in which case the other four adjacent cells lie "north-west", "north-east", "south-west" and "south-east". As a result, no hex cell has an adjacent hex cell lying directly east or west of it, making movement in a straight line east or west impossible. Instead, paths in these directions, and any other path that does not bisect one of the six cell edges, will "zig-zag"; since no two directions are orthogonal, it is impossible to move forward in one direction without moving backwards slightly in the other. En.wikipedia.org

Sid Meyer's Civilization Square Grid


Fortunately, the math of laying out a hex-grid is something I didn't need to give much thought to until I was a little further along thanks to Unity's "newish" Hexagonal Tilemap. (Here again, I can talk more about other challenges around Unity's tilemaps in a future post).

But soon, one of the challenges faced with my first prototype was to find an input system that worked naturally on the wilderness hex-based grid. And since I am targeting low-end consoles like the FireTV, that meant just mapping to the appropriate values (Northwest equals up and left) on their "circular navigation button/bar thing" for my Hexagonal Point Top grid. ... right?

amazon fire tv remotes all 2015

Except "of course not", because once I implemented it, it turns out that the "Navigation" bar is just a DPad with "analogue stick clothing". Registering a diagonal press just doesn't feel good for the user on the FireTV remote even though the documentation claims it as an axis, Basically, you just have to hit the two directional buttons simultaneously... which works, but clumsily.

As a result, I had to go back to a combination of UI and UX to improve the user experience while falling back to what is really a 4-directional d-pad for all practical purposes. Now, when pressing up, your path is either Northeast or Northwest depending on whether your are facing East or West.

left diagonals right diagonals


Thus far, this interface seems to be something my playtesters pick up rather quickly... as long as the UI remains subtle and doesn't get in the way.

However, like most things in game development .. only time will tell. In the meantime, I fall back on the adage of "just try something and hope for emergent game design".

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: