Hex-Tile Grid Based Movement Tutorial

If you haven't already checked out my previous article then do so now. You'll need the two images to follow the tutorial. Also position them in the same way too! http://www.create-games.com/article.asp?id=1543

I thought I'd offer a further helping hand in making a hex-tile game by showing you how to make a grid based moving system. This is quite simple to do just like making a square grid moving system, but requires extra events and a bit of logical thinking. This method allows the player object to move horizontally using left and right arrow keys, and move vertically using a combination of left, right, up and down keys.

Step 1

Lay out the playing field in the same way as it was in my previous article (see above). This time around, the black hex-tile will be refered to as the 'Player'.

Step 2

We'll start by entering events that wil trigger the 'Players' movement. Copy these events:

*Repeat while Right Arrow is pressed
+Alterable value A of 'Player' = 0
+Alterable value B of 'Player' = 0
+ (negated) Repeat while Up Arrow is pressed
+ (negated) Repeat while Up Arrow is pressed
-Set Alterable Value A of 'Player' to 8

*Repeat while Left Arrow is pressed
+Alterable value A of 'Player' = 0
+Alterable value B of 'Player' = 0
+ (negated) Repeat while Up Arrow is pressed
+ (negated) Repeat while Up Arrow is pressed
-Set Alterable Value A of 'Player' to -8

These two events may look cluttered but all the conditions are needed once all the events are finished. Alterable Value A controls horizontal movement and Alterable Value B controld vertical movement (just like in a normal grid based movement engine!).

*Repeat while Up Arrow is pressed
+Repeat while Right Arrow is pressed
+Alterable value A of 'Player' = 0
+Alterable value B of 'Player' = 0
-Set Alterable Value A of 'Player' to 8
-Set Alterable Value B of 'Player' to 8

*Repeat while Up Arrow is pressed
+Repeat while Left Arrow is pressed
+Alterable value A of 'Player' = 0
+Alterable value B of 'Player' = 0
-Set Alterable Value A of 'Player' to -8
-Set Alterable Value B of 'Player' to 8

*Repeat while Down Arrow is pressed
+Repeat while Right Arrow is pressed
+Alterable value A of 'Player' = 0
+Alterable value B of 'Player' = 0
-Set Alterable Value A of 'Player' to 8
-Set Alterable Value B of 'Player' to -8

*Repeat while Down Arrow is pressed
+Repeat while Left Arrow is pressed
+Alterable value A of 'Player' = 0
+Alterable value B of 'Player' = 0
-Set Alterable Value A of 'Player' to -8
-Set Alterable Value B of 'Player' to -8

These four events will trigger the movement of the 'Player' upwards and downwards by pressing either up and right, up and left, down and right, and down and left.

*Alterable value A of 'Player' > 0
+Alterable value B of 'Player' = 0
-Set 'Player' X position to X position of 'Player' + 4
-Sub 1 to Alterable Value A

*Alterable value A of 'Player' < 0
+Alterable value B of 'Player' = 0
-Set 'Player' X position to X position of 'Player' - 4
-Add 1 to Alterable Value A

These two events will actually move the 'Player' horizontally by 32 pixels as the event will occur 8 times before the Alterable Value A returns to 0 and in each time it will move 4 pixels. 8 x 4 = 32 pixels!

*Alterable value A of 'Player' > 0
+Alterable value B of 'Player' <> 0
-Set 'Player' X position to X position of 'Player' + 2
-Sub 1 to Alterable Value A

*Alterable value A of 'Player' < 0
+Alterable value B of 'Player' <> 0
-Set 'Player' X position to X position of 'Player' - 2
-Add 1 to Alterable Value A

(<> means different)

These two events control the movement horizonatally whilst the 'Player is moving vertically. It makes the 'Player' move smoothly to the next tile by changing the amount to move to 2 pixels but don't worry if you don't understand it. If you don't want to include these events then remove the extra conditions on the events before these ones.

*Alterable value B of 'Player' > 0
-Set 'Player' Y position to Y position of 'Player' - 3
-Sub 1 to Alterable Value B

*Alterable value B of 'Player' < 0
-Set 'Player' Y position to Y position of 'Player' + 3
-Add 1 to Alterable Value B

Finally, these two events control just the vertical movement. Hopefully after following these events you should have a fully working example of hex-tile grid moving. Good luck with those hex based games clickers!