Preferred option for indicating player's movement choices on a hexagonal grid on touch [closed]

Question

I'm building a prototype turn-based game and I'm considering the best approach for user interaction with the game board. It's a hexagonal grid, where the user can select units and move to other cells on the board. The number of steps they can take in a single move is variable and depends on the unit.

I'm aiming this for use ontouch screen devices, so that will exclude hover-based indicators (which make the most sense in terms of interaction).

So, with that limitation, what methods are possible for indicating to the user the amount of cells they can move?

So far, I've come up with these options:

• Allow the user to take their turn and move step by step, highlighting the nearest 1 neighbour cells each time.
• Highlight all possible destination cells:

• Highlight the outer ring of maximum distance:

• Draw a line through the outer-most cells to indicate maximum distance:

Each of these has their own drawbacks. The first, will be done dynamically and will require creating the markers on the fly (not inconceivable) and will also look kind of strange when there are lots of options. The image shows a unit which can move 2 cells and already looks over-crowded.

The second would solve the problem of too many cells being lit up at once. Unfortunately, I'd be worried the user wouldn't understand that they could move to one of the non-highlighted cells within the ring.

The last has the same problem as the second where I'm not sure they'd understand where they can move. It would alleviate the need to create multiple markers and store temporarily as I'd only have to store a single hexagon of varying size.

So, any ideas? Am I over-thinking this one?

NOTE: I've made the images above from this extremely useful site: http://www.redblobgames.com/grids/hexagons/

Answer 1

Quite honestly, I think you actually are over-thinking this. It's good to have a well thought-out design, but it's important not to get too hung up on the small details at an early stage. That being said, I think there is a fourth option here that might help you a bit:

As opposed to filling in all hexagons that can be moved to, you can draw an outline around the outside of the hexagons that you can move within. This method immediately shows a fixed border easily setting the distinction between inside and outside of your fixed range. It does add some drawing complexity but it's easy enough to write a simple method of determining this outline.