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();
addChild(map);

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;
		addChild(tF);
		*/
	}
}
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;
stage.addEventListener(MouseEvent.CLICK, mouseClickHandler);

function mouseClickHandler(event:MouseEvent)
{
	if ( moving == false )
	{
		moving = true;
		addEventListener(Event.ENTER_FRAME, changeHeight);
	}
	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!