Why are there hardly any hex-tiled games here or anywhere made with click products?...Thats what I asked myself not to long ago whilst thinking about a new game I'd like to make. Although to be honest I haven't looked too hard for one, they're not exactly the most abundant genre of game here. Therefore it was my mission to make this unusual style more accessable to the community by giving you all a helping hand!

The Hex-Tile Grid System Tutorial

First thing first, I'll tell you what you about to make. Most clickers know full well how to make an active object follow the mouse cursor and have it lock onto a square tile grid. This is the most common way of making level editors and whatnot. What I'm going to show you is how to make the same thing using hex-tiles! This should be very helpful to those of you who would like to make a computer game based on a hex-tiled board game, where pieces are played on the hex-tiles and so on.

Step 1

You need two objects, one for the background (for visual purposes) and one for the cursor itself (obviously an active object if you didn't already know). Both need to be made out of hex-tiles. Here are the two images you need for this tutorial:

Image

Image

Now mosaic the background tiles across the screen and place the cursor object smack bang in the top left corner (be sure to put the cursors hotspots in the centre of the tile). You'll notice that the cursor doesn't line up with the background tile, just position the background tiles so that they line up with the cursor object (a snap-able grid of 16x8pixels will help!).

Step 2

Here comes the interesting bit. The events are actually quite simple but it took me a few tries to get it completely right! Copy these events:

*X position of 'Cursor' < XMouse - 16
-Set X position to X'Cursor' + 32

*X position of 'Cursor' > XMouse + 16
-Set X position to X'Cursor' - 32

These two events move the cursor horizontally following the mouse. Nothing new here as this is the same code used to make a square grid cursor lock onto each tile!

*Y position of 'Cursor' < YMouse - 12
+XMouse > X'Cursor'
-Set Y position to Y'Cursor' + 24
-Set X position to X'Cursor' + 16

*Y position of 'Cursor' > YMouse + 12
+XMouse > X'Cursor'
-Set Y position to Y'Cursor' - 24
-Set X position to X'Cursor' + 16

*Y position of 'Cursor' < YMouse - 12
+XMouse < X'Cursor'
-Set Y position to Y'Cursor' + 24
-Set X position to X'Cursor' - 16

*Y position of 'Cursor' > YMouse + 12
+XMouse < X'Cursor'
-Set Y position to Y'Cursor' - 24
-Set X position to X'Curser' - 16

These four events move the cursor vertically by 24 pixels (this is the amount needed so that it is aligned vertically with the next row of tiles above or below it). The reason there is an additional action is to align the cursor horizontally with the next row of tiles too. Depending on which side the actual mouse is to the cursor when it moves up or down determines which way the offset is applied making the whole locking system very eye pleasing.

Hopefully you understand the way this code works and you've managed to make an example of your own, but just incase you don't understand the numbers involved and want to make larger or smaller hex-tiles for the cursor to lock onto then follow this.

As my tiles were based on a 32x32pixel hexagon, all the numbers used were derived from this size. If you want to make tiles twice as big (64x64), then just double all the numbers used in the events! Its that simple. Tiles that are 16x16pixels require you to half all the numbers in the events and so on. You can see the patern right?! Well thats it, go mess around with it because I wanna see more hex-tiled games on the DailyClick ASAP!!