Recognizing a hexagonal clickbox

Question

I'm working on a game that is going to involve gasp hexagons.

At present, I have a hexagon image that I am using (all sides are the same length...it fits into a 50px by 50px image).

I am somewhat new to C# and really new to XNA, but is there some sort of easy method that I can call rather than doing a convoluted if statement based on points and angles?

Answer 1

A hexagon is a rectangle with clipped corners. The way I've seen this done, and I've heard the Civilization series does it this way with orthogonal maps, is to create a bitmap with a white space (orthogonal or hexagonal), and a red, green, blue, and yellow corner. (Or whatever colors you like.)

Hexagonal: or

Orthogonal:

Then, just determine which rectangle the cursor is over, and test the color of the pixel at that location. If it's white, they're hovering over that space. Each other color is mapped to an offset, and they're hovering over that hexagon instead. This way is efficient, takes little geometry, and can be used for any arbitrarily tessellating space.

Answer 2

There's no XNA method that does a hexagon hit test.

This article explains how to write a function that does the test, and gives you the function:

How to Check if a Point is Inside a Hexagon

Here is a summary from that article:

And the function that does the test goes like this:

1. Test the bounding box around the hexagon, early out if it does not intersect it.
2. Transform the point into a local quadrant as shown above.
3. Perform the following isInside test for the local quadrant.

---

public function isInside(pos:Vec2Const):Boolean
{
    const q2x:Number = Math.abs(pos.x - _center.x);       
    const q2y:Number = Math.abs(pos.y - _center.y);
    if (q2x > _hori || q2y > _vert*2) 
        return false;
    return 2 * _vert * _hori - _vert * q2x - _hori * q2y >= 0;
}

See the article for full details.

---

Here are some other useful related sources:

• Coordinates in Hexagon Based Tile Maps

• Is a point inside a regular hexagon?

Answer 3

Here i got a method that can be used to detect clicks inside any polygon:

public bool PointInPolygon( Vector2 p, Vector2[] poly )
    {
        Vector2 p1, p2;
        bool inside = false;

        if( poly.Length < 3 )
        {
            return inside;
        }

        Vector2 oldPoint = new Vector2( poly[poly.Length - 1].X, poly[poly.Length - 1].Y );

        for( int i = 0; i < poly.Length; i++ )
        {
            Vector2 newPoint = new Vector2( poly[i].X, poly[i].Y );

            if( newPoint.X > oldPoint.X )
            {
                p1 = oldPoint;
                p2 = newPoint;
            }
            else
            {
                p1 = newPoint;
                p2 = oldPoint;
            }

            if( ( newPoint.X < p.X ) == ( p.X <= oldPoint.X )
                && ( (long)p.Y - (long)p1.Y ) * (long)( p2.X - p1.X )
                 < ( (long)p2.Y - (long)p1.Y ) * (long)( p.X - p1.X ) )
            {
                inside = !inside;
            }

            oldPoint = newPoint;
        }

        return inside;
    }

You need to give the corners of your hexagon in a vector2 array (poly) and the clicked position (p) to the method.