Hexagonal Grids: A Guide for Game Developers

Hexagonal Grids

Hexagonal grids are a powerful tool in game development, especially for strategy games, RPGs, or any game that involves a tactical layer. Unlike square grids, hexagonal grids have some unique properties that allow for more natural movement patterns, smoother transitions, and more interesting gameplay dynamics. In this article, we’ll cover how to implement hexagonal grids in your games, focusing on the math behind them, different types of hexagonal coordinate systems, and C# code examples to help you get started.

The Basics of Hexagonal Grids

Hexagonal grids are composed of hexagons that tile a 2D plane without any gaps. Each hexagon has six neighbors (as opposed to the four neighbors in a square grid), which creates more natural movement patterns, especially for diagonal movements. Hexagonal grids are commonly used in games that require pathfinding, strategic placement, or any gameplay mechanic that benefits from a more organic grid layout.

Types of Hexagonal Grid Layouts

There are two main types of hexagonal grids: pointy-topped and flat-topped. In a pointy-topped grid, the hexagons are oriented with a vertex pointing upwards. In a flat-topped grid, one of the edges is aligned horizontally.

Pointy-Topped Grid

In a pointy-topped grid, hexagons are oriented with a vertex facing up, making the vertical movement more intuitive. This is often used in games where the vertical movement needs to be prioritized.

Flat-Topped Grid

In a flat-topped grid, the hexagons are oriented with a flat edge at the top, making horizontal movements more intuitive. This layout is often used in games where horizontal movement is more frequent or natural.

Hexagonal Grid Coordinate Systems

Unlike square grids, hexagonal grids don’t use simple (x, y) coordinates. Instead, there are different coordinate systems used to navigate and calculate distances in hexagonal grids. The most common coordinate systems are offset coordinates, axial coordinates, and cube coordinates.

Offset Coordinates

Offset coordinates are a modification of the square grid coordinates to fit hexagonal grids. In a pointy-topped grid, every other row is offset, while in a flat-topped grid, every other column is offset. Offset coordinates are easy to visualize but can be more complicated for calculations.

Axial Coordinates

Axial coordinates simplify the math by reducing the 3D cube coordinates (x, y, z) to 2D (q, r). Axial coordinates work well for most use cases and are a good balance between simplicity and functionality.

        // Axial coordinate system example in C#
public class Hex
{
    public int q; // "q" coordinate
    public int r; // "r" coordinate

    public Hex(int q, int r)
    {
        this.q = q;
        this.r = r;
    }

    public int Distance(Hex other)
    {
        // Calculate distance using axial coordinates
        return (Math.Abs(this.q - other.q) + Math.Abs(this.q + this.r - other.q - other.r) + Math.Abs(this.r - other.r)) / 2;
    }
}
        
    

In this example, the `Distance` method calculates the distance between two hexes using the axial coordinate system. This calculation is essential for pathfinding algorithms, range calculations, and more.

Cube Coordinates

Cube coordinates use three axes (x, y, z) to represent each hexagon, with the constraint that x + y + z = 0. This system makes it easy to calculate distances and perform rotations, but it requires more memory and can be harder to visualize.

        // Cube coordinate system example in C#
public class Hex
{
    public int x;
    public int y;
    public int z;

    public Hex(int x, int y, int z)
    {
        if (x + y + z != 0) throw new ArgumentException("Invalid cube coordinates");
        this.x = x;
        this.y = y;
        this.z = z;
    }

    public int Distance(Hex other)
    {
        // Calculate distance using cube coordinates
        return Math.Max(Math.Abs(this.x - other.x), Math.Max(Math.Abs(this.y - other.y), Math.Abs(this.z - other.z)));
    }
}
        
    

In this code, cube coordinates are used to calculate the distance between hexes. This system is powerful for certain types of calculations and is worth considering if you need more advanced grid functionality.

Drawing a Hexagonal Grid

To draw a hexagonal grid in Unity or any game engine, you need to calculate the position of each hexagon. The positions are determined using a combination of trigonometry and your chosen coordinate system. Here’s a simple example using Unity’s Vector3 class and axial coordinates:

        // Drawing hexagons using axial coordinates in Unity
public Vector3 HexToPixel(Hex hex, float hexSize)
{
    float x = hexSize * (3.0f / 2 * hex.q);
    float y = hexSize * (Mathf.Sqrt(3) * (hex.r + hex.q / 2.0f));
    return new Vector3(x, y, 0);
}
        
    

This method converts axial coordinates to pixel coordinates, allowing you to position hexes correctly in Unity. The hexSize parameter determines the size of each hexagon, and the calculation places them in the correct positions on a 2D plane.

Hexagonal Pathfinding

Pathfinding on a hexagonal grid can be more complex than on a square grid, but the principles remain the same. A common algorithm used for pathfinding is the A* (A-star) algorithm. When applying A* to a hexagonal grid, the main difference is in how you calculate neighbors and distances.

        // A* pathfinding on a hexagonal grid in C#
public List AStar(Hex start, Hex goal)
{
    // Implement A* pathfinding using hexagon neighbors and distance calculations
    var openSet = new List();
    var cameFrom = new Dictionary();
    var gScore = new Dictionary();
    var fScore = new Dictionary();

    openSet.Add(start);
    gScore[start] = 0;
    fScore[start] = start.Distance(goal);

    while (openSet.Count > 0)
    {
        Hex current = openSet.OrderBy(h => fScore.ContainsKey(h) ? fScore[h] : int.MaxValue).First();

        if (current.Equals(goal))
        {
            // Reconstruct path
            List path = new List();
            while (cameFrom.ContainsKey(current))
            {
                path.Add(current);
                current = cameFrom[current];
            }
            path.Reverse();
            return path;
        }

        openSet.Remove(current);

        foreach (Hex neighbor in GetNeighbors(current))
        {
            int tentativeGScore = gScore[current] + 1; // Assume each move costs 1
            if (!gScore.ContainsKey(neighbor) || tentativeGScore < gScore[neighbor])
            {
                cameFrom[neighbor] = current;
                gScore[neighbor] = tentativeGScore;
                fScore[neighbor] = gScore[neighbor] + neighbor.Distance(goal);
                if (!openSet.Contains(neighbor))
                    openSet.Add(neighbor);
            }
        }
    }

    return new List(); // No path found
}
        
    

This code snippet shows a simple implementation of the A* algorithm for hexagonal grids. It uses a heuristic based on the distance between hexes to find the shortest path from the start to the goal. The GetNeighbors method is critical here, as it provides the algorithm with the adjacent hexes to consider for movement.

Conclusion

Hexagonal grids offer a versatile and dynamic alternative to square grids in game development. By understanding the various coordinate systems, math behind grid placement, and pathfinding strategies, you can effectively integrate hexagonal grids into your game. Whether you're creating a strategy game, RPG, or a unique genre, hexagonal grids can add depth and complexity to your gameplay.

Search This Blog

GameHatchery Mobile Game Development