Public Group

# Hexagonal movement

## Recommended Posts

Hello,

I've never tried creating a game, so I thought it would be interesting and decided to start with a simple 2d game using hexagons as tiles. I'm trying to make hexagonal movement by one tile using mouse click but there is no progress, so I hope to get some help here. I've watched some YouTube tutorials, but I think I need something concrete to make an understanding. I tried to make a bunch of waypoints and then put them in center of each hexagon but then realised it's not going to work with mouseclick.

I was wondering if it is more simpler to make hexagonal movement by creating tiles as 3D objects because it is possible to click on them or is there any way to make it using hexagonal grid?

I really hope to get some help with that.

##### Share on other sites
1 hour ago, TheMightyOwl said:

I was wondering if it is more simpler to make hexagonal movement by creating tiles as 3D objects because it is possible to click on them or is there any way to make it using hexagonal grid? ﻿﻿

Since you are a beginner it is easier to start with square tiles.  I recommend you start with the easiest thing that could possibly work, then once you can do that well, add complexity.

For your question about selection, it is possible to select hex grid cells based on clicks through a small amount of math.

Overall a hex grid works fundamentally the same as a square grid. Navigating in hex tiles is very similar to navigating square tiles with one addition: one direction is unchanged, the other direction has a slight zig-zag.  Selection is similar to a square grid except in the zig/zag area.

##### Share on other sites

As frob says, hexagons are very similar to plain square grids. To see, imagine a plain square grid, then shift each odd row by 1/2 a square (draw it if you don't see it). There is your hexagon grid, except for the zig-zag pattern between the rows.

If you only click near the center of a tile, this is also how you compute the position of a click. First compute the row of the click. If it is odd, shift the tiles by 1/2 a square and compute the column. For pixel-perfect clicking, you need to compute exactly where the zig-zag pattern is. Best approach for that is to draw a picture with the coordinates and figure out the math you have to do.

I'd suggest you start with a square grid first to detect clicks. A second step is to use the shifted rows. The pixel-perfect clicks will cost you around 2-3 days if you know 2d math, and know how to implement the checks. If you don't know, it's much much longer (this holds for the shifted rows as well).

The trouble with hexagons is that the computations with positions and movement and stuff all get more complicated. It's manageable if you have written a game before, but for your first game, there are so many things you have to figure out and try, it's a waste to spend a month on hexagon tiles so you can click on them. An empty set hexagon tiles is not a game. For this reason, start with the simplest possible solution at first (like a simple square grid) so you can make more progress. If you get stuck (and you will), less and simpler code also means it's simpler and faster to change it to get yourself unstuck. You're building your first car, don't try to make a F1 racing car on your first day!

##### Share on other sites
Posted (edited)

Checkout my work here: https://richstrat.com/zug.html code at https://github.com/richtype/openstrat to convert from integer coordinates to regular 2d space you just multiply the y coordinate by the square root of 3. I have doubled up the integer coordinates to allow the hexagon tile sides to have integer coordinates. Most even moderately complex tile games require values for the tile sides as well as the tiles. So the hex side between Hex(10,10) and Hex(12, 12) is HexSide(11, 11).

Under this system even the Hex tile vertices can be given a unique integer coordinate, which can be useful, although that  requires a slightly more complex mapping. In the following yRatio is square root of 3:

def coodToVec2(cood: Cood): Vec2 = coodToVec2(cood.x, cood.y)
def coodToVec2(x: Int, y: Int): Vec2 =
{
def yAdj: Double = y * yRatio
(x % 4, y % 4) match
{
case (xr, yr) if yr.isEven && xr.isEven => Vec2(x, yAdj)
case (xr, yr) if yr.isEven => throw new Exception("HexCood, y is even but x is odd. This is an invalid HexCood")
case (xr, yr) if xr.isOdd  && yr.isOdd => Vec2(x, yAdj)
case (0, 1) | (2, 3)  =>  Vec2(x, yAdj + yDist /2)
case (xr, yr) => Vec2(x, yAdj - yDist / 2)
}
}


Edited by Rich Brighton

• 10
• 10
• 12
• 10
• 33