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();
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!

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

One Response to Grid based games – Part X.0: Hexmap and movement

  1. Pingback: Grid based games – Part X.1: Hexmaps and terrain « YARR!cade.com LÞ the kegogrog blog

Leave a Reply

Your email address will not be published.