## Grid based games – Part X.0: Hexmap and movement

This is kind of an experiment with a hexagonal map. I just had a look at “The Settlers”. Great game. Alright, the hexmap (map made of hexagonal tiles) can be described by nodes arranged in a triangular fashion.

Here is what we are going to create:

```
var nodeArray:Array = new Array();
var posArray:Array = new Array();

var rows:int = 15;
var cols:int = 15;

var tileW:Number = 32;
var tileH:Number = Math.round(Math.sin(60*Math.PI/180)*tileW);

var node:Object;

for ( var row = 0; row < rows; row++ )
{
for ( var col = 0; col < cols; col++ )
{
node = new Object();
node.u = row;
node.v = col;
node.z = Math.round(Math.random()*20);
node.xPos = col * tileW - row * tileW * 0.5;
node.yPos = row * tileH + node.z;
nodeArray.push(node);
posArray.push(row+"."+col);
}
}

var map:MovieClip = new MovieClip();

function drawMap ( )
{
for each ( var nObj in nodeArray )
{
map.graphics.lineStyle(1, 0x000000);
{
var drawingArray = getNeighbors(nObj);
for each ( var member in drawingArray )
{
map.graphics.moveTo(nObj.xPos, nObj.yPos);
map.graphics.lineTo(member.xPos, member.yPos);
}
}
//map.graphics.drawCircle(nObj.xPos, nObj.yPos, 3);
/*
var tF = new TextField();
tF.x = nObj.xPos;
tF.y = nObj.yPos;
tF.text = nObj.u+"."+nObj.v;
*/
}
}
drawMap();

function getNeighbors(centerNode)
{
var u = centerNode.u;
var v = centerNode.v;

var nArray:Array = new Array();
nArray.push( (u-1) +"."+ (v-1) );
nArray.push( (u-1) +"."+ (v  ) );
nArray.push( (u  ) +"."+ (v-1) );
nArray.push( (u  ) +"."+ (v+1) );
nArray.push( (u+1) +"."+ (v  ) );
nArray.push( (u+1) +"."+ (v+1) );
var resultArray:Array = new Array();
for each ( var member in nArray )
{
var checkNum = posArray.indexOf(member);
if ( checkNum > -1 )
{
resultArray.push(nodeArray[checkNum]);
}
}
return resultArray;
}

```

Just like in the previous parts, we create a number of nodes but this time they are all drawn to the same movieclip called map. Line activates a circle at the respective node and the textfield is useful to get the node’s position in the map. It’s deactivated here vor better visibility.

```
var moving:Boolean = false;

function mouseClickHandler(event:MouseEvent)
{
if ( moving == false )
{
moving = true;
}
else
{
moving = false;
removeEventListener(Event.ENTER_FRAME, changeHeight);
}
}

function changeHeight(event:*)
{
map.graphics.clear();
for each ( var nObj in nodeArray )
{
nObj.z = Math.random()*20;
nObj.yPos = nObj.u * tileH + nObj.z;
}
drawMap();
}
```

The ‘moving’ boolean tells us if the EnterFrame function is actually active or not and activates/deactivates it. In that particular function every node’s height is set with a new random value and the map is redrawn.

What’s next? Tell me in the comments. Yoho!

### More articles in grid based games:

This entry was posted in as3, flash, game development, Grid Based Games, grids, mochiads and tagged , , , , . Bookmark the permalink.