Hexagons

Published August 20, 2016
Advertisement

I have recently started working on a new side project. My goal is to develop a simple turn based strategy game with a space-y theme.

I'm set on using a hexagonal tile map, because everybody knows that hexagons are awesome. Developing a hexagonal tile map looked like one of the first technical challenges I would have to face, so I started coding. And by coding I mean working out the math with pen and paper.

The first thing I needed was a coordinate system to assign coordinates to each tile. I decided that the origin (0, 0) would be the tile at the left-center corner. Every tile to the up-right diagonal would increase the x in 1 and every tile to the down-right diagonal would increase the y in 1. Now I can store the tiles in a dictionary identified by these coordinates and use math to retrieve the nearby tiles and calculate the distance between two tiles very easily.

The image below illustrates how the coordinate system looks like.
hexagons.png

Having that system, I had to find a way to translate these coordinates to the screen coordinates and back to render the map and interact with the tiles using the mouse. This took a fair amount of drawing and multiplying things by sin(30o) and sin(60o). It is probably easier than it felt at the moment, but my rusty geometry skills made it look hard. I can't say it wasn't fun, though.

I put together a simple script to generate and render a hexagon tile map. In the video below you can see the current functionality I have.

That's all for now. My next step will probably be to put together some mechanics so I have something to prototype on.

4 likes 8 comments

Comments

Mike Bossy

If you haven'ts seen this link it has a bunch of info on standard Hex map handling that is a great resource:

http://www.redblobgames.com/grids/hexagons/

August 20, 2016 09:32 PM
Avalander

That was an interesting reading, thanks Mike!

August 21, 2016 11:44 AM
Navyman

What did you build this in? And Hex grids are Awesome!

August 22, 2016 01:18 AM
Avalander

What did you build this in? And Hex grids are Awesome!

Yup. I've had a thing for hex grids since long, long time ago. I used plain Javascript with canvas. It's what I'll probably use to build the actual game.

August 22, 2016 07:17 AM
Navyman

Looking at using Hex grids for UE4 Project I am working on.

August 22, 2016 09:17 AM
bdubreuil

If you haven'ts seen this link it has a bunch of info on standard Hex map handling that is a great resource:

http://www.redblobgames.com/grids/hexagons/

Holy shit! I just favorited this link ahah

August 23, 2016 01:49 AM
Mark_Butler

Using a simple grid works extremely well. Draw a vertical line thru *all* hexagon centers. Draw a horizontal line thru *all* hexagon centers. This is a very nice coordinate system that works well for calculations.

It comes from Analytic Geometry. It is called the cartesian coordinate system. Translating to screen coordinates is straight forward. Just multiply by the screen scale.

No matter where I locate a hexagon, the one NE(60°) is at (+1,-1), the one SE(60°) is at (+1,+1), the one S is at (+0,+2), the one SW(60°) is a (-1,+1), the one NW(60°) is at (-1,-1), and N is (0,-2);

Notice that the grid coordinate does not match the hexagon name. This where where you use a formula to switch between the two.

Since its a cartesian coordinate, it can be scaled, transformed and rotated if needed. It also avoids the odd/even up/down issue. So, do all the math in the grid, but use a formula to display the hexagon name.

See http://www.battleanalysis.com/Examples/hexagonGridCalculator.html and http://www.battleanalysis.com/Examples/drawMap.html for examples.

Mark

August 24, 2016 10:07 PM
Mark_Butler

examples moved to http://www.battleanalysis.com

July 25, 2019 10:07 PM
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Profile
Author
Advertisement
Advertisement