Be my fan on FacebookUnderstanding hexagonal tiles
You should already know Tile Maps: they are often used for the level design in two-dimensional games.
The most used (and simplest) tiling system has squares. Tileball is an example of a game made with this method.
Even if there are a lot of games using this tiling system, it’s easy to find its limit. All movements are restricted to four directions: up, down, left, right.
Some more complex games require a more complex tiling system.
That’s why I am introducing you the hexagon based tile system (hex maps from now on)
Wkipedia explains us the advantage of a hex map over a square grid map is that the distance between the center of each hex cell and the center of all six adjacent hex cells remains constant. Compare this to a square grid map where the distance from the center of each square cell (of side length x) to the center of its four diagonal adjacent cells is longer than the distance to the center of its four cardinal adjacent cells (x√2 instead of x).
It’s nothing new, because you may find hex maps in Gettysburg, a board game released in 1958 (yes: half a century ago), as you can see in the photo showing the 125th Anniversary Edition of the game
Back to computer games, you can play The Battle for Wesnoth, a free turn based strategy game designed in June 2003 by David White using hex maps
Now that we know hex maps are important, let’s see what is an hexagon: in geometry, a hexagon is a polygon with six edges and six vertices. When the six sides of an hexagon have the same length, we are talking about a regular hexagon.
Regular hexagon properties
As you can see, if all sides have the same lenght, we can say the total length of the hexagon is:
Total length = Side + 2*(Side*sin(30°)) = Side + 2*0.5 = 2*Side
And the total height is:
Total height = 2*(Side*cos(60°))
Now, it’s important to know we can tile hexagons in two ways: I don’t think someone already gave a name to the ways you can tile hexagons, so I will call H-hex map a map made tiling hexagons horizontally and V-hex map a map made tiling hexagons vertically, just like in the picture.
Obviously, each map has its own way to manage tiles.
And that’s all… obviously I am about to code everything in Actionscript, meanwhile if you have some code to share, show the world you are awesome
(5 votes, average: 4.80 out of 5)
Loading ...15 Responses to “Understanding hexagonal tiles”
Leave a Reply
Trackbacks
-
Odds & Ends: April 17, 2008 on
April 18th, 2008 1:20 am
[...] A short overview of hexagonal tiles, or “hexes” to you wargamers in the crowd, from “italian geek and PROgrammer” Emanuele Feronato [...]
-
Hex maps creation and rollover : Emanuele Feronato - italian geek and PROgrammer on
April 20th, 2008 2:18 pm
[...] article does not cover all hex maps, just horizontal ones. Read Understanding hexagonal tiles to know something more about hex [...]
-
Developing hex map concept : Emanuele Feronato on
October 22nd, 2008 9:36 pm
[...] months ago I released some tutorials about hexagonal tiles (and I developed an Halloween game based upon Hex maps creation and rollover and Finding adjacent [...]
-
Halloween Couples : Emanuele Feronato on
November 2nd, 2008 9:27 pm
[...] basics of hexagonal environments are explained in Understanding hexagonal tiles, Finding adjacent cells in an hex map – part 1 and [...]
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)
interesting concept
exellent! Perfect timing as always as i am currently struggling with it ;)
This is great, will this be added to the Boxhead game tutorials ? Since boxhead has 8 directions of movement, 6 is close.
JDog, the 8 and 6 directions are very different. the tiles used in the boxhead games are not hex tiles and therefore do not have the difficulties that come with placing them.
what you are talking about is walking directions, that is a whole different topic :)
Oh heck, I knew that, I was just wondering. Its isometric isn’t it….sorry I was being silly. An isometric tile engine would be cool…
I not to long ago made hexagons tile (tho with as2) for a flash website, i’d like to see how you do this, i wrote a very simple function which drew horizontal lines of hexagons, and per line the starting position jumped left or right half a hexagon. Im sure there are better mathematical ways, enlighten me :)
Emanuele you forgot about Hexic, the best game in the world to feature Hexagons !
Your hexagon diagram is wrong.
Side * cos(60) should be Side * cos(30) or Side * sin(60) I think (:
Thx for the excellent tutorials btw.
another way to figure out the height of a hexagon (V-Hex style as per your example):
Pythagoras sez:
a^2 + b^2 = c^2
we know c which is the radius and a which is half the radius.
So we are looking for sqrt(c^2 – a^2) or sqrt(3/4)*radius.
i guess one of them might be faster, like a 2.345 milliseconds :D
About 10 years ago, I wrote a collection of functions that would help a person navigate hex maps. The functions included: Identifying the adjacent hexes, identifying the shortest path between two hexes, the relative position of a hex from the perspective of another hex and the distance between two hexes.
Let me see if I can find that code and I will send it to you.
Your stuff on hexagons is interesting. Maybe you will like the way that I have used the concept for my Hexidek. If you google the word, you ought to find some pics online.