Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Hexagonal Tiles game, and Game development.

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

Gettysburg

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

Wesnoth

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

Hexagon

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.

Hexagon tiling

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

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.