This guide will cover various ways to make hexagonal grids, the relationships between different approaches, and common formulas and algorithms. Hexagonal grids aren't as common as square grids. I've been collecting hex grid resources  for over 20 years, and wrote this guide to the most elegant approaches that lead to the simplest code, largely based on the guides by Charles Fu  and Clark Verbrugge .
Most parts of this page are interactive. The code samples on this page are written in pseudo-code; they're meant to be easy to read and understand. Hexagons are 6-sided polygons.
Regular hexagons have all the sides the same length. I'll assume all the hexagons we're working with here are regular. The typical orientations for hex grids are vertical columns flat topped and horizontal rows pointy topped. Hexagons have 6 sides and 6 corners. Each side is shared by 2 hexagons. Each corner is shared by 3 hexagons. For more about centers, sides, and corners, see my article on grid parts  squares, hexagons, and triangles.
Each corner is size units away from the center. In code:.
Games and Software
Note that the diagrams on this page use the y axis pointing down angles increase clockwise ; you may have to make some adjustments if your y axis points up angles increase counterclockwise. Next we want to put several hexagons together. The horizontal distance between adjacent hexagon centers is w.
Some games use pixel art for hexagons that does not match an exactly regular polygon. The angles and spacing formulas I describe in this section won't match the sizes of your hexagons.
The rest of the article, describing algorithms on hex grids, will work even if your hexagons are stretched or shrunk a bit, and I explain on the implementation page how to handle stretching. Now let's assemble hexagons into a grid.
Games and Software
With square grids, there's one obvious way to do it. With hexagons, there are multiple approaches. I like cube coordinates for algorithms and axial or doubled for storage. The most common approach is to offset every other column or row. Columns are named col q.
Rows are named row r. Another way to look at hexagonal grids is to see that there are three primary axes, unlike the two we have for square grids. There's an elegant symmetry with these. This is a weird idea but it helps us make hex grid algorithms simpler. In particular, we can reuse standard operations from cartesian coordinates: adding coordinates, subtracting coordinates, multiplying or dividing by a scalar, and distances.
Notice the three six hex grid directions are halfway between two of the cube axes. We'll see this in the neighbors section, where moving along one of the six hex grid directions involves changing two of the coordinates. Because we already have algorithms for square and cube grids, using cube coordinates allows us to adapt those algorithms to hex grids. I will be using this system for most of the algorithms on the page.
To use the algorithms with another coordinate system, I'll convert to cube coordinatesrun the algorithm, and convert back. Study how the cube coordinates work on the hex grid. Selecting the hexes will highlight the cube coordinates corresponding to the three axes.So you want to make a hex grid? To do that, you need to tell mkhexgrid what you want, which can be done in two ways—in a specfile, and with command-line options. Let's see an example: Suppose that you want a 10x10 grid with vertical grain and hexsides 30 pixels long, as a PNG image.
To get that, open your favorite text editor e. Save what you've typed in a file named spec. This will be your spec file, from which mkhexgrid will read the parameters for your hex grid. You'll want your specfile to be somewhere that mkhexgrid can find it—on Windows, the directory into which you've installed mkhexgrid is a good choice, on Unix mkhexgrid is likely to be in your path if you've installed it, so the location of the specfile is up to you.
Next, you need to run mkhexgrid using the spec file you created. Now that you have a shell, go to the directory where you put your specfile if you're not already there and run mkhexgrid by typing. When the program is finished, you will have a new image file tut1. It should look like this. The result isn't especially pretty, since it's not antialiased and the hex coordinates are printed in the centers of the hexes.
You can improve it a bit by adding the following lines to your specfile:. Antialiasing is turned on, which results in smoother lines and the hex coordinates are moved to the tops of the hexes. You should now see output like this. Now you've seen the basics of how to use mkhexgrid. Much more is possible than is shown in this tutorial. For more options, see the Reference Manual.In this tutorial we will take a look at several ways to create grids, including hexagonal grids, which will be a basis for seamless geometric patterns.
Such types of patterns are relatively easy to create; they remain, however, in demand in different design spheres, such as print design, textile design and web design. You can download the source vector file for this tutorial. You can quickly create geometric grids with the help of the Scriptographer plug-in and the Grid Generator script, which works inside mentioned plug-in.
This method is, unfortunately, available only for users of the earlier Adobe Illustrator releases 9- CS5. The users of the latest releases of the application CS6-CC will need to create such grids manually, and we will talk about it later. Download the Scriptographer plug-in on the Download page. Before installing the plug-in, take a look at the instruction.
Start Adobe Illustrator or restart the script, if it was started during the installation process. Now we have an opportunity to choose one of four types of grid, specify the size and the number of cells.
This is, probably, the most common type of grid. Other methods are based on the same principle. Create a hexagon with the help of Polygon Tool. Despite the precise positioning of the objects, sometimes we can get stray points. Move the group of triangles down and to the right so that the top A coincides with the top B. The smart guides help us to do it accurately. This time we combine the top of the letters marked B and C and double the groups. Select all the created objects and repeat the last actions in the vertical direction- i.
Despite the bulky description, such grid is very easy to create. You can also use the Transform effect to duplicate the cells of the grid. However, before we apply the effect, we need to make some measurements. Select one of the groups with triangles. Its width is equal to the horizontal shift. This value can be seen in the Control panel or in the Transform panel. To determine the value of the vertical shift we need to measure the distance between points A and B.
Unfortunately, the Measure Tool is generally not suitable for accurate measurements. Create a straight segment between points A and B. The smart guides can help us to position its points perfectly. To do this, draw a straight segment between points C and D, as it is indicated on the figure below. The width of the segment is equal to the size of the horizontal shift, and its height corresponds to the vertical shift.
Set the value of the horizontal shift and the necessary number of copies, click OK. This time set the size of the vertical shift and the necessary number of copies.Overwhelmed with all the quilting terms? Sizes of quilts?Mostly Civilized: A Hex-Based 4x Game Engine for Unity - Part 1
Doing math?? Could it be simpler? Not ready to fiddle with all the custom bits? You can purchase a full set of printable hexagons templates here. Given length of a side x … Tip to tip across the hex is 2 x. Area of the hex is 1. What you have to remember with this fun program is that the side X is going to be 2X for a hexagon. This form is a little tricky and you might end up with some hexagons that are totally not what you were expecting.
Head on over here to start making and printing your hexagons! Hexagon Generator.
Along with that you will not be given any spacing in between the hexagon shapes. They are printed side by side and so when cutting you might loose a line or two depending on your cutting skills. Should be easy enough to cut with scissors and re-usable.
It is a bit tricky to find a flat spot big enough for your templates, but once you do and have yours made, it will last a long time. Not transparent, you will have to lay the template on top of it and then cut it out.
X-ray sheets- this is a new one to me, but works great! If you ask your doctor or dentist they might be able to give you a few sheets. Thin enough to be cut with scissors, but much stronger than cardstock paper. The non melt lets you use it with an iron.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
If nothing happens, download GitHub Desktop and try again. If nothing happens, download Xcode and try again. If nothing happens, download the GitHub extension for Visual Studio and try again. It's a world map generator written in Python. It generates a random world map represented in a hexagon grid.
The parameters for the generator allow for any kind of planet surface to be generated. It also can segment the surface into randomly sized globs called territories. I'm using this as a board for a browser-based game I am working on. It can be used for anything from DnD campaigns to open-source games or even just for fun.
It's recommended to use virtualenv and virtualenvwrapper to keep the dependencies of this project separate from those that are installed globally on your system. With virtualenvwrapper, you can install this project with the following:.
Tip: Installing Pillow through pip requires the python header files.
The primary export of Hexgen is a data structure that represents the world map. It can also export a bunch of png files that show various features on the map. One interesting thing it can do is take all the data about a hexagon and determine its true color.
As exported as an image, the entire grid taken as a whole can be thought of as a satellite image. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up. A Python-based hexagonal world map generator. Python Other.
Python Branch: master. Find file. Sign in Sign up. Go back. Launching Xcode If nothing happens, download Xcode and try again. Latest commit. Latest commit d Oct 3, Hexgen What is this?
Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I have made it working on a square grid, however all my attempts to make it work on a hexagonal grid have failed.
I'm using the same technique to both draw the grid and generate coordinates as seen in this topic. Store info on how we got here and just how good it really is. Tried looking around for some good examples or documents on the internet but couldn't really find anything of use. The problem resides in your neighbors method: although a hexagon has six neighbors 6you only push four 4 onto ret. The following figure highlights the issue. The light grey hex represents the current node i.
The green hexagons are added to retbut the red hexagons are not. Regarding your updated manhattan method: it is correct. The following figure uses colors to show the distance from the current central hex at  in red to every other hex. For example, the orange hex tiles are one 1 move from the red. The yellow are two 2 moves from the red. And so on. You may notice the pattern: If the x- and y-coordinates share the same sign, the distance is equal to the magnitude of the largest coordinate.
Otherwise, the distance is the sum of their absolute values. This is exactly the way you've calculated distance in your updated manhattan method. So you're good there. Regarding heuristic search in general: Here's a simple way to check if a suboptimal solution is the result of a bug in the heuristic implementation or else because of a bug in the algorithm implementation. Just use the heuristic value zero 0 for all values, i. If, while using the trivial heuristic, the path is not optimal, then you know it's not a heuristic problemit's an algorithm problem.
As already mentioned by someone here, the way I was generating the grid, and also the coordinates were incorrect.
I have another read through Amit Patel's implementation guide and I used his way to generate the grid and also the coordinates system including the coord.
This is a solved problem, with much literature to back it up.Well, there are a couple of good reasons why people choose hex grids. Hopefully, everything should work just fine. The second method to generate the grid is a bit more advanced because it involves calculating how many hexes fit on top of certain size ground.
Once the script is created, the steps are pretty much the same as in the previous section: attach the script, initialise public variables and start, except one thing : if your ground is not a plane you should set the y coordinate on line 62 to something that would lift your tiles just enough to be seen by the player.
Coming next — path finding. This entry was posted on Tuesday, February 21st, at and is filed under Hexagonal grid. You can follow any responses to this entry through the RSS 2. You can leave a responseor trackback from your own site. Hey just wondering, where does hexSizeX come from in line 74 in the second version of the script? Any suggestions? I have the same issue and I can see that the rotation is off but I cannot edit it. The whole imported object section is greyed out in the inspector.
How can I fix that? Edit: I made my own prefab and no matter what rotation I set the prefab to I still get this problem. I thought I may have messed something up while typing the script so I copied yours and still had the same issue. It is now measuring the thickness of the hexes which are incredibly thin.
In order to counteract this, you may take two paths. Do you have a saved project I could study to see my mistakes. I am using the hex model you mentioned. Any ideas? How can I change the initial position of the grid, I tried to add a Vector3 position to the InitPos method and it does not seem to offset the z direction correctly. Do you want to raise it? You need to change 0 there with sth that fits your needs better.
Hi Hakimio, thank you for the quick response. I am not looking to modify the grid height I am trying to create a small hex grid centered at a specific vextor3 world coordinate. I have tried to add this specific vector to the initpos method to change its starting position in world space but I cannot seem to change the z vector.
It will always remain at zero.
How to create hexagonal grids for making patterns in Illustrator
I am struggling to see where this is overwritten. I see the y vector is overwritten in the calcworldcoor method as you have pointed out however changing the height is not my concern at the moment.
Any help would be appreciated.