Jump to content
  • Advertisement
  • entries
  • comments
  • views


Sign in to follow this  


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.

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.

Sign in to follow this  


Recommended Comments

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.

Share this comment

Link to comment
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.

Share this comment

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!