Circular text can be useful in several designs, so here is a little class that produces the following:

What the swf shows is first the ‘debug-version’ which changes after a click to the naked text version. Consecutive clicks will produce the same for randomized values.

CircleText.as

package
{
	import flash.display.Sprite;
	import flash.geom.Matrix;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	/**
	 * CircleText.as
	 * @author kegogrog
	 */
	public class CircleText extends Sprite
	{
		private static const degToRad:Number = Math.PI / 180;

These are the basic imports and the private var degToRad used for the conversion of degrees into radians.

		public function CircleText( startAngle:Number = -90, endAngle:Number = 90, radius:Number = 80, inner:Boolean = false, text:String = "This text is a test.", debug:Boolean = true )

The class accepts several inputs, the most important are startAngle, endAngle and radius. I hope I do not need to explain those. inner defines if the text is located on the outside of the circle or on the inside. text should be pretty obvious and debug just defines what one can see. I recommend to delete that once the class is implemented while it is nothing the user has to see.

		{
			var tff:TextFormat = new TextFormat();
			tff.font = "calibri";
			tff.size = 20;

It is important to use an embedded font, so here I am just defining a text format. One could also reference that in the constructor or use a global format.

			var sr:Number = startAngle * degToRad;
			var er:Number = endAngle * degToRad;

			if ( debug )
			{
				this.graphics.lineStyle(0, 0xcccccc);
				this.graphics.drawCircle(0, 0, 3);
				this.graphics.drawCircle(0, 0, radius);
				this.graphics.drawCircle(Math.sin(sr) * radius, -Math.cos(sr) * radius, 4);
				this.graphics.drawCircle(Math.sin(er) * radius, -Math.cos(er) * radius, 2);
			}

The angles are converted to radians and if debug is true the midpoint, the circle itself are drawn and the start and end of the text is marked.

			var i:int;
			var tf:TextField;
			var m:Matrix;
			for ( i = 0; i < text.length; i++ )
			{
				tf = new TextField();
				tf.selectable = false;
				tf.autoSize = TextFieldAutoSize.LEFT;
				tf.defaultTextFormat = tff;
				tf.embedFonts = true;
				tf.text = text.charAt(i);

				if ( debug )
				{
					tf.background = true;
					tf.backgroundColor = 0xcccccc;
					tf.alpha = 0.8;
				}

				m = new Matrix();
				m.translate( -tf.width * 0.5, -tf.height * ( inner ? 0 : 1 ) - radius );
				m.rotate( sr + ( ( er - sr ) / ( text.length - 1 ) ) * i );
				tf.transform.matrix = m;

				addChild(tf);
			}
		}
	}
}

The biggest code chunk here splits the string into single characters, creates a textfield for each one and applies translation (depending on inner) and rotation according to the start and end angle and the characters position in the string. The translation in x moves the textfield so that it is centered.

I was using FlashDevelop for this presentation with the following

Main.as

:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;

	/**
	 * Main.as for CircleText
	 * @author kegogrog
	 */
	public class Main extends Sprite
	{
		[Embed(
			source = 'font/calibri.ttf',
			fontName = "calibri",
			fontWeight = "normal",
			advancedAntiAliasing = "true",
			mimeType = "application/x-font",
			fontStyle = "normal",
			embedAsCFF = 'false',
			unicodeRange = 'U+0020-U+007E'
			)]
		private var calibri:Class;

		private var startAngle:Number = -90;
		private var endAngle:Number = 90;
		private var radius:Number = 80;
		private var inner:Boolean = false;
		private var text:String = "This text is a test.";
		private var debug:Boolean = true;

		private var ct:CircleText;

		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point

			buildText();
			stage.addEventListener(MouseEvent.CLICK, buildText);
		}

		private function buildText(event:MouseEvent = null):void
		{
			if ( ct )
			{
				removeChild(ct);
			}
			ct = new CircleText( startAngle, endAngle, radius, inner, text, debug );
			ct.x = stage.stageWidth >> 1;
			ct.y = stage.stageHeight >> 1;
			addChild(ct);

			if ( !debug )
			{
				startAngle = Math.random() * 360;
				endAngle = startAngle + Math.random() * 180 + 90;
				radius = Math.random() * 30 + 50;
				inner ? inner = false : inner = true;
			}
			debug ? debug = false : debug = true;
		}
	}
}

buildText takes the predefined variables and adds a new CircleText. With the next click it shows the non-debug version and and changes the variables prior to the next click.

Being a sprite, CircleText can be rotated by its own rotation property. One could also put all text fields into an array and animate them, maybe flying of the screen from the center. Have fun playing with that.

Yoho!

Embedding asstes into your FD project is pretty simple. In fact it is as easy as 1, 2, 3. One: Copy, two: embed, three: use. Let’s go!

1. Copy

Alright, with your assets ready you should create a folder in your project folder or even in src. For the following example I created the folder sounds for (obviuosly) sounds and copied the font directly into src.

The FD project folder

2. Embed

Embedding a font efficiently means knowing which glyphs you need. The following is a great source for finding Unicode ranges.

	public dynamic class Main extends MovieClip
	{
		[Embed(
			source = 'BERLIN.TTF',
			fontName = "berlinSans",
			fontWeight = "bold",
			advancedAntiAliasing = "true",
			mimeType = "application/x-font",
			fontStyle = "normal",
			embedAsCFF = 'false',
			unicodeRange = 'U+0020,
					U+0041-U+005A,
					U+0061-U+007A,
					U+0030-U+0039,
					U+002E, U+002F,
					U+0027, U+00A9,
					U+00E4, U+00FC'
			)]
		private var berlinSans:Class;

		[Embed( source = 'sounds/SoundPop.mp3')]
		private var SoundPop:Class;
		public var soundPop:Sound;

		[Embed(source = 'sounds/sound12.mp3')]
		private var SoundSwap:Class;
		public var soundSwap:Sound;

		[Embed(source = 'sounds/WintersDream.mp3')]
		private var Music:Class;
		public var music:Sound;

All embeds are followed directly by private vars, defining the embedded assets as classes. To use them public vars are created. Caveat: If you create folders anywhere, remember the path ( for source)!

3. Use

		public function Main():void
		{
			music = new Music();
			soundPop = new SoundPop();
			soundSwap = new SoundSwap();

The fonts are used simply by referring to the fontName you set in the embed section. By setting yourTextField.embedFonts you can use your font.

			iFormat = new TextFormat();
			iFormat.font = "berlinSans";
			iFormat.color = 0xaaaaaa;
			iFormat.size = 24;

			gameName = new TextField();
			gameName.embedFonts = true;
			gameName.defaultTextFormat = iFormat;
			gameName.text = "yourText here";
			addChild(gameName);
			gameName.selectable = false;
			gameName.autoSize = TextFieldAutoSize.LEFT;

Pretty much always you should set yourTextField.selectable to false. As a player I am always a bit picky when it comes to buttons where the text selection tool shows up.

The same thing goes with graphics I think though I didn’t try that.

Yoho!

A little further experiment with 3D makes me want to play LHX or D-Track.

If the movie does not react to keyboard input, click once inside of it to give it focus.

There are a lot of optimization opportunities, though the frame rate seems to be pretty stable. Smoothing the terrain could be next, depth sorting is obviuosly not the best. Well, that’s what weekends are for, right?

Source? Sure: ZIP (13.9 KB)

Please tell me in the comments if it works for you and if you experience any lags.

Yoho!

Click the movie to give focus to the keyboard.

Alright, while I already wrote about putting the concepts of this series to a use, here are two examples:

• The implementation of a minimap and
• The concept of a bouncing map

The minimap is implemented pretty easy. With a decreased tilesize and a zero mountain height you can easily modify the size of the map and make it ‘mini’. Now the map is bigger than what the ‘playground’ shows. Pretty easy again. With the getNodeByCoords methods we’ll define the middle node (for example by clicking on the minimap) and do just show a region of the actual map.

And here is just a little idea I had when I thought about how to torture the little folks in my realm. Click on the map and imagine a mighty clashing sound.

Wish I had some more time to continue here. Meanwhile you can play Pete Barons remake of populous in flash. Have fun, yoho!

The following dialogue came up in the comments of Part 1 of this tutorial.

JJ: Could you show me a way to fill each tile of the map with a bitmap or some other graphic type? Is a solution possible based on using beginBitmapFill() ?
Me: What exactly do you want to achieve? Do you want to use graphics (imported or drawn in flash) for tiles? Or do you really want to fill the tile like texturing it?
JJ: I meant filling the tiles like texturing it.

What do you think?

It is dynamically built, it is modifiable by mouse clicks, it is textured and it was pretty simple!

Import, declare and use your favorite texture(s)

Via File > Import > Import to Library choose any jpg, gif, png or whatnot and import it. I imported a jpeg (try ‘free sample texture’ on google), renamed it, linked it to ActionScript and included two lines at the beginning of the code:

var grass:BitmapData = new TextureG(100, 100);
var water:BitmapData = new TextureW(100, 100);

What those two lines do is creating two BitmapData objects with 100px width and 100px height. Those can be used with beginBitmapFill.

Remember the drawFour() function from the last tutorials? That is the function that draws the tiles with fills and is changed with little effort.

function drawFour(tile)
{
	with ( tileMap.graphics )
	{
		beginBitmapFill(grass);
		moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
		lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
		lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
		lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
		lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
		endFill();

If the function would end here all tiles were drawn with the grass texture. Nice for a quick try. But it doesn’t look that good. Well, there are still some lines that may be useful. Remember the different shades of green used to indicate the direction of the tile? Exactly those shades of green are now used to shade the texture. So, for the darkest green used (0×003300) I will now use a black with 50% transparency. The second darkest green is now a 25% transparent black. Same thing goes for the bright greens which are now white with different transparencies. Try what looks good on your texture.

Oh, and if the tile is flat and on level zero the grass is just overpainted by the water texture.

		switch(tile.tType)
		{
			case "0000":
				//flat
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				if ( tile.lev == 0 )
				{
					beginBitmapFill(water);
				}
				else
				{
					beginFill(0,0);
				}
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				break;
			case "0001":
				//north
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0x000000, 0.5);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				//south
				moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				beginFill(0x000000, 0.25);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				endFill();
				break;
			case "0010":
				//east
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0x000000, 0.5);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				//west
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0xffffff, 0.1);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				break;
...

And so on and so on. Yes, it is a quick and dirty solution. It does work though. The begin BitmapFill method does have some parameters that were not covered in this tutorial and can improve the overall visuals.

Yoho!

Alright, giving the landscape some natural feeling by applying colors to the tiles. This simply fits into the dynamic drawing of tiles by using a fill. The shading here will be done with static colors instead of shadow calculation.

The result will look like this:

First things first. When it comes to choosing a color palette that fits the needs of our application. The most simple thing I could think of here was shades of green with blue for the zero level (aka water). The surface of planet could be red, a desert maybe yellow and white could be used for the inside of a refridgerator (could be an interesting game).

The shading main palette for the tiles

The next thing I did was to set a tile type. That way I was able to use switch...case (more on that here). The next code is based on Appendix A. There, right after the makeTiles function I inserted the following.

function recalcTiles()
{
	for each ( var tile in tileArray )
	{
		tile.low = tile.n.w;
		tile.e.w < tile.n.w ? tile.low = tile.e.w : void;
		tile.s.w < tile.e.w ? tile.low = tile.s.w : void;
		tile.w.w < tile.s.w ? tile.low = tile.w.w : void;

		tile.n.i = tile.n.w - tile.low;
		tile.e.i = tile.e.w - tile.low;
		tile.s.i = tile.s.w - tile.low;
		tile.w.i = tile.w.w - tile.low;

		tile.tType:String = tile.n.i.toString()+tile.e.i.toString()+tile.s.i.toString()+tile.w.i.toString();
	}
}

The lowest height value (sic!) is found by comparing all four corner nodes. Each node then gets assigned a value i determining his difference from the lowest. Those values are hopefully between 1 and 0. A string is created in clockwise order.

Remember that drawTile function? That's the subject of change now.

function drawTiles()
{

	var tileMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
	var tileMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
	tileMap.x = stage.stageWidth * 0.5;
	tileMap.y = stage.stageHeight * 0.5 - tileMapSizeV * 0.5;
	tileMap.graphics.lineStyle(1, 0x000000);

	for each ( var tile in tileArray )
	{
		if ( tile.valid )
		{
			var tileText = new TextField();
			tileText.text = String(""+tile.n.w+tile.e.w+tile.s.w+tile.w.w);
			tileText.autoSize = TextFieldAutoSize.CENTER;
			tileText.x = tile.s.xPos + tileMap.x - tileText.width/2;
			tileText.y = tile.s.yPos + tileMap.y;
			addChild(tileText);

			tile.n.zPos == tile.s.zPos ? tile.ver = true : tile.ver = false;
			tile.e.zPos == tile.w.zPos ? tile.hor = true : tile.hor = false;

			drawFour(tile);
		}
	}
	addChild(tileMap);
}

Besides the text field (just information) the whole drawing code is in an external function.

function drawFour(tile)
{
	with ( tileMap.graphics )
	{
		switch(tile.tType)
		{
			case "0000":
				//flat
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				if ( tile.lev == 0 )
				{
					beginFill(0x000099);
				}
				else
				{
					beginFill(0x009900);
				}
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				break;
			case "0001":
				//north
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0x003300);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				//south
				moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				beginFill(0x006600);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				endFill();
				break;
			case "0010":
				//east
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0x003300);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				//west
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				beginFill(0x00CC00);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				endFill();
				break;
//and so on

Okay, so I had a look at every tile (like they used to look in Appendix A) and determined the direction of its parts. Then, with a look at the chosen color palette and beginFill and endFill I brought them to life. There is a case setting for each of the 16 tiles. To be honest there are only 15, because both flat tiles are in the same case, and their color just depends on their level. Seeing that concept I am sure you can figure out the rest of that function above on yourself.

After applying that the showroom will look like that.

EDIT: Here's the Source (zip).

Yoho!

This part deals with the implementation of the moving nodes method (Part 2) from one dimension to the pseudo 3D landscape and begins with the movie itself for you to test what it does.
Just hover through the landscape and lift single nodes with a mouse click. Neither am I gone further by implementing lowering nodes nor did I hide the mouse cursor and the green pointer. The first one would have (additionally) increased the number of code lines in this post without adding relevant information. Hiding the cursor would have brought the movie closer to a final state but at the moment it is the method that counts.

I will once again show the whole code (timeline for your convenience, just copy and paste it) because of several small alterations. Here is comes:

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

var nodeRows:int = 9;
var nodeCols:int = 9;

var tileSizeH:int = 32; //horizontal
var tileSizeV:int = 16; //vertical
var tileSizeM:int = 8; //mountain

function makeGrid()
{
	for ( var u = 0; u <= nodeCols ; u++ )
	{
		for ( var v = 0; v <= nodeRows ; v++ )
		{
			var node:Object = new Object();
			node.u = u;
			node.v = v;
			node.w = Math.round(Math.random());
			node.nodePos = u + "." + v;

			nodeArray.push(node);
			posArray.push(node.nodePos);
		}
	}
}

This creates a 10 by 10 nodes grid (it counts up to nine in the loop, BUT begins with zero), so what we get out of this is capable of being a 9 by 9 tiles grid. The node gets its w value on a random basis. It is either zero or one what also is our maximum difference in height between adjacent nodes. One could go further and enter a higher max value but then the map has to be tested and modified accordingly after creation of all nodes. Else the creation loop itself could bring the existing heights into account. It is absolutely possible but not included in this part.

function placeNodes()
{
	for each ( var node in nodeArray )
	{
		node.xPos = ( node.u - node.v ) * tileSizeH;
		node.yPos = ( node.v + node.u ) * tileSizeV;
		node.zPos = node.w * tileSizeM;
		node.nArray = getNeighbors(node);
	}
}

Going through all created nodes and assigning them their three dimensional pixel position and all the nodes that are directly adjacent to them (maxmum four).

var nodeMap:Sprite = new Sprite();
addChild(nodeMap);

function drawNodes()
{
	var nodeMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
	var nodeMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
	nodeMap.x = stage.stageWidth * 0.5;
	nodeMap.y = stage.stageHeight * 0.5 - nodeMapSizeV * 0.5;
	nodeMap.graphics.lineStyle(1, 0xaaaaaa);
	for each ( var node in nodeArray )
	{
		nodeMap.graphics.drawEllipse(node.xPos - 4, node.yPos - 2, 8, 4);
	}
}

Creating a new sprite, adding it to the screen and placing it. Flash basics there. Then again looping through all nodes drawing them to the sprite that will serve as the visualization of the "landscapes" "zero level" (would be water in Populous or SimCity).

makeGrid();
placeNodes();
drawNodes();

Yes, those three function need to be called for the code to work.

function getNodeByCoords( u, v )
{
	var posString:String = u + "." + v;
	var nodePos:int = posArray.indexOf(posString);
	if ( nodePos >= 0 )
	{
		return nodeArray[nodePos];
	}
	else
	{
		return null;
	}
}

This function returns a node by given grid coordinates.

function validateNode ( u, v )
{
	if ( u >= 0 && u <= nodeCols && v >= 0 && v <= nodeRows )
	{
		return true;
	}
	else
	{
		return false;
	}
}

function getNeighbors( cNode )
{
	var nArray:Array = new Array();
	validateNode ( cNode.u, cNode.v - 1 ) ? nArray.push( getNodeByCoords ( cNode.u, cNode.v - 1 ) ) : void;
	validateNode ( cNode.u + 1, cNode.v ) ? nArray.push( getNodeByCoords ( cNode.u + 1, cNode.v ) ) : void;
	validateNode ( cNode.u, cNode.v + 1 ) ? nArray.push( getNodeByCoords ( cNode.u, cNode.v + 1 ) ) : void;
	validateNode ( cNode.u - 1, cNode.v ) ? nArray.push( getNodeByCoords ( cNode.u - 1, cNode.v ) ) : void;

        validateNode ( cNode.u - 1, cNode.v - 1 ) ? nArray.push( getNodeByCoords ( cNode.u - 1, cNode.v - 1 ) ) : void;
	validateNode ( cNode.u - 1, cNode.v + 1 ) ? nArray.push( getNodeByCoords ( cNode.u - 1, cNode.v + 1 ) ) : void;
	validateNode ( cNode.u + 1, cNode.v - 1 ) ? nArray.push( getNodeByCoords ( cNode.u + 1, cNode.v - 1 ) ) : void;
	validateNode ( cNode.u + 1, cNode.v + 1 ) ? nArray.push( getNodeByCoords ( cNode.u + 1, cNode.v + 1 ) ) : void;

	return ( nArray );
}

Those two functions are basically checking which of the eight adjacent nodes exist (there are less than four for margin nodes) and return an array that is then saved in the single node's properties.

var tileArray:Array = new Array();

function makeTiles()
{
	for ( var u = 0; u < nodeCols; u++ )
	{
		for ( var v = 0; v < nodeRows; v++ )
		{
			var tile:Object = new Object();
			tile.n = getNodeByCoords(u, v);
			tile.e = getNodeByCoords(u+1, v);
			tile.s = getNodeByCoords(u+1, v+1);
			tile.w = getNodeByCoords(u, v+1);
			tileArray.push(tile);
		}
	}
}

Tiles are created between four nodes. So there is one tile less than nodes in a column and the same goes for the rows.

var tileMap:Sprite = new Sprite();
addChild(tileMap);
var tileMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
var tileMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
tileMap.x = stage.stageWidth * 0.5;
tileMap.y = stage.stageHeight * 0.5 - tileMapSizeV * 0.5;

var terraform:Boolean = false;

function drawTiles()
{
	tileMap.graphics.clear();

	for each ( var tile in tileArray )
	{
		tile.n.zPos == tile.s.zPos ? tile.ver = true : tile.ver = false;
		tile.e.zPos == tile.w.zPos ? tile.hor = true : tile.hor = false;

		with(tileMap.graphics)
		{
			lineStyle(1, 0xaaaaaa);

			if ( tile.s.u == nodeCols )
			{
				moveTo(tile.e.xPos, tile.e.yPos);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				moveTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				lineTo(tile.e.xPos, tile.e.yPos);

			}
			if ( tile.s.v == nodeRows )
			{
				moveTo(tile.w.xPos, tile.w.yPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				moveTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				lineTo(tile.w.xPos, tile.w.yPos);
			}

			lineStyle(1, 0x000000);

			if ( tile.ver && tile.hor )
			{
				if ( tile.n.zPos > tile.e.zPos )
				{
					moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
					lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				}
				else if ( tile.n.zPos < tile.e.zPos )
				{
					moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
					lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				}
				//if both are the same, there is no line
			}
			else if ( tile.ver && !tile.hor )
			{
				moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
			}
			else if ( !tile.ver && tile.hor )
			{
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
			}
			moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
			lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
			lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
			lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
			lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
		}
	}
	terraform = false;
}

Drawing the tiles was covered in Part 1 and Appendix A.
There is a new Boolean that will later on tell if the map is already updated or still drawing. Once the new map is on it is set to false.

makeTiles();
drawTiles();

Again, calling functions.

var tFormCursor:MovieClip = new MovieClip();
with( tFormCursor.graphics )
{
	lineStyle(1, 0x990000);
	beginFill(0x990000, 0.5);
	drawEllipse(-6, -4, 12, 8);
	endFill();
}
tFormCursor.visible = false;

var nFormCursor:MovieClip = new MovieClip();
with( nFormCursor.graphics )
{
	lineStyle(1, 0x009900);
	beginFill(0x009900, 0.5);
	drawEllipse(-5, -3, 10, 6);
	endFill();
}
nFormCursor.visible = false;
addChild(nFormCursor);
addChild(tFormCursor);

The cursors that were introduced in Part 2. For a more appropriate visulization in the isometric map ellipses instead of circles are used.

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

var actualNode:Object = new Object();

function mouseMoveHandler(event:MouseEvent)
{
	updatePosition();
}
function updatePosition()
{
	var nodeU = Math.round (( nodeMap.mouseX / tileSizeH ) * 0.5 + ( nodeMap.mouseY / tileSizeV ) * 0.5 );
	var nodeV = Math.round ( - ( nodeMap.mouseX / tileSizeH ) * 0.5 + ( nodeMap.mouseY / tileSizeV ) * 0.5 );

	if ( validateNode(nodeU, nodeV) )
	{
		actualNode = getNodeByCoords ( nodeU, nodeV );

		tFormCursor.visible = true;
		tFormCursor.x = actualNode.xPos + nodeMap.x;
		tFormCursor.y = actualNode.yPos - actualNode.zPos + nodeMap.y;

		nFormCursor.visible = true;
		nFormCursor.x = actualNode.xPos + nodeMap.x;
		nFormCursor.y = actualNode.yPos + nodeMap.y;
	}
	else
	{
		actualNode = null;
		tFormCursor.visible = false;
		nFormCursor.visible = false;
	}
}

The function showing the actual position in the grid. By hiding the the mouse cursor and the nFormCursor one would only see the actual position that will be altered by click. updatePosition calculates the position in grid coordinates (or column and row). Node distances that are set at the beginning are taken into account. Instead of nodeMap.mouseX one could take just mouseX but then the map's registration point must also be considered in that calculation.

stage.addEventListener(MouseEvent.CLICK, mouseClickHandler);

function mouseClickHandler(event:MouseEvent)
{
	if ( actualNode && !terraform )
	{
		terraform = true;
		var openList:Array = new Array();
		var closedList:Array = new Array();
		openList.push(actualNode);
		while ( openList.length > 0 )
		{
			var oNode:Object = openList.shift();
			closedList.push(oNode);
			oNode.w++;
			for each ( var nNode in oNode.nArray )
			{
				if( closedList.indexOf(nNode) < 0 && openList.indexOf(nNode) < 0 )
				{
					if ( oNode.w - nNode.w > 1 )
					{
						openList.push(nNode);
					}
				}
			}
		}
		placeNodes();
		drawTiles();
		updatePosition();
	}
}

The heart of this tutorial part. When the click listener fires it checks wether there is actually a grid node under the cursor by looking for actualNode not being null. Also, if there is actually a calculation going on, means terraform would be true nothing happens. Let's assume there is an actualNode and no calculation is going on.
terraform is set true (a click won't have any effect in that moment), two arrays are created and the actualNode is pushed into an openList. That array is crucial for the calculation loop. So, while there are more than zero objects in there it loops through the following lines.
We declare a new Object named oNode and create a reference to the first element of openList. oNode is then pushed into the closedList because we pretty sure will take care about it now.

This node's (that's what this element/object is) height step is increased by one. Now, this node's adjacent neighbors are checked wether they are already in the open or closed list. If so, skip further steps. If not the height differnce is calculated and if it differs more than on step, guess what, the relevant node is pushed into the openList.
All that open and closed list checking is done to avoid an infinite loop via checking nodes that already where moved/visited. leaving that out can create interesting results but those may be not the ones we were looking for.

Now, with that done, you should be ready to implement the same for lowering nodes. What bothers me so far and needs to be clarified prior to action is the best possible control scheme. Without the right mouse button, not because I do not have one but we're in Flash and there is a pre-defined use for it(context menu), there are several possibilities. One could be having a button for 'LAND UP' and a button for 'LAND DOWN'. Hmm, what's a common techniqe in Populous? Twice up, one down for four flat tiles. Okay, I could switch here. Three up, three down, one up for 16 flat tiles. And that is no seldom action. In the name of user friendliness: no buttons to switch here please! That would be more button mashing than actual landscaping. Up next: the control scheme!

Yoho!

In this part of the terrain modification tutorial I will show you how to move single nodes and their neighbors if necessary. To begin at a smaller scale I will not use a multi-row grid but a line of nodes instead.
Every node in a line will have two neighbors (except for the outer ones of course).

First task is building the (one row) grid. Since the first part dealt with a lot of grid building I’ll just give you the code here.

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

var nodeRows:int = 1;
var nodeCols:int = 9;

var tileSizeH:int = 32; //horizontal
var tileSizeV:int = 16; //vertical
var tileSizeM:int = 16; //mountain

function makeGrid()
{
	for ( var u = 0; u <= nodeCols - 1 ; u++ )
	{
		for ( var v = 0; v <= nodeRows - 1 ; v++ )
		{
			var node:Object = new Object();
			node.u = u;
			node.v = v;
			node.w = 1;
			node.nodePos = u + "." + v;

			nodeArray.push(node);
			posArray.push(node.nodePos);
		}
	}
}

The only thing new is that the nodes get assigned a w-value, which is the integer step for the height that is calculated in the next function. And the initial value is set for a better visualization.

function placeNodes()
{
	for each ( var node in nodeArray )
	{
		node.xPos = ( node.u ) * tileSizeH;
		node.yPos = ( node.v ) * tileSizeV;
		node.zPos = ( node.w ) * tileSizeM;
		node.nArray = getNeighbors(node);
	}
}

var nodeMap:Sprite = new Sprite();
var nodeMapSizeH = ( nodeCols - 1 ) * tileSizeH;
var nodeMapSizeV = ( nodeRows - 1 ) * tileSizeV;
nodeMap.x = stage.stageWidth * 0.5 - nodeMapSizeH * 0.5;
nodeMap.y = stage.stageHeight * 0.5 - nodeMapSizeV * 0.5;
nodeMap.graphics.lineStyle(1, 0xaaaaaa);
addChild(nodeMap);

function drawNodes()
{
	for each ( var node in nodeArray )
	{
		nodeMap.graphics.drawCircle(node.xPos, node.yPos, 3);
	}
}

makeGrid();
placeNodes();
drawNodes();

Nothing new here. Right now you've got a line of grey circles. Oh, and each node holds an array of its neighboring nodes. We'll see how that works when coming to the function.

function getNodeByCoords( u, v )
{
	var posString:String = u + "." + v;
	var nodePos:int = posArray.indexOf(posString);
	if ( nodePos >= 0 )
	{
		return nodeArray[nodePos];
	}
	else
	{
		return null;
	}
}

This function was also explained in Part 1.

function validateNode ( u, v )
{
	if ( u >= 0 && u <= nodeCols - 1 && v >= 0 && v <= nodeRows - 1 )
	{
		return true;
	}
	else
	{
		return false;
	}
}

validateNode does check if the there even can be a node at this position. Also nothing exciting.

function getNeighbors( cNode )
{
	var nArray:Array = new Array();
	validateNode ( cNode.u, cNode.v - 1 ) ? nArray.push( getNodeByCoords ( cNode.u, cNode.v - 1 ) ) : void;
	validateNode ( cNode.u + 1, cNode.v ) ? nArray.push( getNodeByCoords ( cNode.u + 1, cNode.v ) ) : void;
	validateNode ( cNode.u, cNode.v + 1 ) ? nArray.push( getNodeByCoords ( cNode.u, cNode.v + 1 ) ) : void;
	validateNode ( cNode.u - 1, cNode.v ) ? nArray.push( getNodeByCoords ( cNode.u - 1, cNode.v ) ) : void;
	return ( nArray );
}

Alright, although we're on a one row grid this function checks if the center node (cNode) has a neighbor above, right, below and left and any existing neighbor is pushed into an array which finally is returned. So, each node now knows about its adjacent neighbors.

var lineMap:Sprite = new Sprite();
lineMap.x = nodeMap.x;
lineMap.y = nodeMap.y;
addChild(lineMap);

function drawMap ()
{
	lineMap.graphics.clear();
	//drawing a line from the node circle to the actual position including height
	lineMap.graphics.lineStyle(1, 0xaaaaaa);
	for ( var i:int = 0; i < nodeArray.length; i++ )
	{
		lineMap.graphics.moveTo ( nodeArray[i].xPos, nodeArray[i].yPos - 3 );
		lineMap.graphics.lineTo ( nodeArray[i].xPos, nodeArray[i].yPos - nodeArray[i].zPos );
	}
	//drawing a line between a node and the next, caveat: the loop ends second to the last node
	lineMap.graphics.lineStyle(1, 0x000000);
	for ( i = 0; i < nodeArray.length - 1; i++ )
	{
		lineMap.graphics.moveTo ( nodeArray[i].xPos, nodeArray[i].yPos - nodeArray[i].zPos );
		lineMap.graphics.lineTo ( nodeArray[i+1].xPos, nodeArray[i+1].yPos - nodeArray[i+1].zPos );
	}
	//finally some nice circles at the height position
	for ( i = 0; i < nodeArray.length; i++ )
	{
		lineMap.graphics.moveTo( nodeArray[i].xPos, nodeArray[i].yPos - nodeArray[i].zPos );
		lineMap.graphics.beginFill(0xffffff);
		lineMap.graphics.drawCircle( nodeArray[i].xPos, nodeArray[i].yPos - nodeArray[i].zPos, 3 );
		lineMap.graphics.endFill();
	}
}

drawMap();

To draw the filled circles, the moveTo was absolutely necessary. Leaving that out corrupted the fill and caused serious errors. So: be careful with fills, they tend to have weird behaviour.

var tFormCursor:MovieClip = new MovieClip();
with( tFormCursor.graphics )
{
	lineStyle(1, 0x990000);
	beginFill(0x990000, 0.5);
	drawCircle(0, 0, 6);
	endFill();
}
tFormCursor.visible = false;
addChild(tFormCursor);

var nFormCursor:MovieClip = new MovieClip();
with( nFormCursor.graphics )
{
	lineStyle(1, 0x009900);
	beginFill(0x009900, 0.5);
	drawCircle(0, 0, 6);
	endFill();
}
nFormCursor.visible = false;
addChild(nFormCursor);

Hmm, one circle to show the actual hovered node (green) and one on the actual height position (red). Both invisible until needed.

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

var actualNode:Object = new Object();

function mouseMoveHandler(event:MouseEvent)
{
	updatePosition();
}
function updatePosition()
{
	var nodeU = Math.round ( ( mouseX - nodeMap.x ) / tileSizeH );
	var nodeV = Math.round ( ( mouseY - nodeMap.y ) / tileSizeV );

	if ( validateNode(nodeU, nodeV) )
	{
		actualNode = getNodeByCoords ( nodeU, nodeV );

		tFormCursor.visible = true;
		tFormCursor.x = actualNode.xPos + nodeMap.x;
		tFormCursor.y = actualNode.yPos - actualNode.zPos + nodeMap.y;

		nFormCursor.visible = true;
		nFormCursor.x = actualNode.xPos + nodeMap.x;
		nFormCursor.y = actualNode.yPos + nodeMap.y;
	}
	else
	{
		actualNode = null;

		tFormCursor.visible = false;
		nFormCursor.visible = false;
	}
}

An eventHandler firing at every mouse move, calling a function that calculates the actual hovered node and places the cursors appropriately. If there is no node near nothing is shown.

stage.addEventListener(MouseEvent.CLICK, mouseClickHandler);

function mouseClickHandler(event:MouseEvent)
{
	if ( actualNode )
	{
		var openList:Array = new Array();
		openList.push(actualNode);
		while ( openList.length > 0 )
		{
			var oNode = openList.shift();
			oNode.w++;
			for each ( var nNode in oNode.nArray )
			{
				if ( oNode.w - nNode.w > 1 )
				{
					openList.push(nNode);
				}
			}
		}
		placeNodes();
		drawMap();
		updatePosition();
	}
}

Well, that is the main function in this tutorial. When a click is received over a node (the if checks it actualNode is not null) an array is created and the actual node pushed into it.
While there is something in this array the first element is removed from the array and returned. This nodes height step is now increased by one. And by checking its neighbors those of them are identified that have a height difference to the actual center node of more than one step. If so, they are pushed to the open list. Once all relevant nodes are updated their pixel height is recalculated, the map is drawn and the cursors are set to the new position (at least the red one).
Okay, here is the swf. Play around. The next turorial will cover height modification in a grid. And maybe for up and down.

Yoho!

This appendix is part of the terrain modification tutorial series and holds information about the dynamic creation and drawing of tiles.
The different tile styles presented are some sort of tribute to great old games like Populous and SimCity and their differences in tile design.

Part A.0: The Tile Showroom
To really have a good overview of the different tiles the following code will not produce a complete map. Single tiles are presented with offset.

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

var nodeRows:int = 8;
var nodeCols:int = 8;

var tileSizeH:int = 32; //horizontal
var tileSizeV:int = 16; //vertical
var tileSizeM:int = 12; //mountain

var heightArray:Array = new Array(
				  0,0,0,0,
				  0,0,0,1,
				  0,0,1,0,
				  0,0,1,1,
				  0,1,0,0,
				  0,1,0,1,
				  0,1,1,0,
				  0,1,1,1,
				  1,0,0,0,
				  1,0,0,1,
				  1,0,1,0,
				  1,0,1,1,
				  1,1,0,0,
				  1,1,0,1,
				  1,1,1,0,
				  1,1,1,1);

function makeGrid()
{
	for ( var u = 0; u < nodeCols; u++ )
	{
		for ( var v = 0; v < nodeRows; v++ )
		{
			var node:Object = new Object();
			node.u = u;
			node.v = v;
			node.nodePos = u + "." + v;

			nodeArray.push(node);
			posArray.push(node.nodePos);
		}
	}
}

function placeNodes()
{
	for each ( var node in nodeArray )
	{
		node.xPos = ( node.u - node.v ) * tileSizeH;
		node.yPos = ( node.v + node.u ) * tileSizeV;
		node.zPos = node.w * tileSizeM;
	}
}

function drawNodes()
{
	var nodeMap:Sprite = new Sprite();
	var nodeMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
	var nodeMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
	nodeMap.x = stage.stageWidth * 0.5;
	nodeMap.y = stage.stageHeight * 0.5 - nodeMapSizeV * 0.5;
	nodeMap.graphics.lineStyle(1, 0xaaaaaa);
	for each ( var node in nodeArray )
	{
		nodeMap.graphics.drawCircle(node.xPos, node.yPos, 3);
	}
	addChild(nodeMap);
}

function getNodeByCoords( u, v )
{
	var posString:String = u + "." + v;
	var nodePos:int = posArray.indexOf(posString);
	if ( nodePos >= 0 )
	{
		return nodeArray[nodePos];
	}
	else
	{
		return null;
	}
}

var tileArray:Array = new Array();

function makeTiles()
{
	var validT:int = 0;
	for ( var u = 0; u < nodeCols - 1; u++ )
	{
		for ( var v = 0; v < nodeRows - 1; v++ )
		{
			var tile:Object = new Object();
			tile.n = getNodeByCoords(u, v);
			tile.e = getNodeByCoords(u+1, v);
			tile.s = getNodeByCoords(u+1, v+1);
			tile.w = getNodeByCoords(u, v+1);
			tileArray.push(tile);

			if ( u%2 == 0 && v%2 == 0 ) //test if row and column are even
			{
				tile.valid = true;
				tile.n.w = heightArray[validT];
				tile.e.w = heightArray[validT+1];
				tile.s.w = heightArray[validT+2];
				tile.w.w = heightArray[validT+3];
				validT+=4;
			}
		}
	}
}

function drawTiles()
{
	var tileMap:Sprite = new Sprite();
	var tileMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
	var tileMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
	tileMap.x = stage.stageWidth * 0.5;
	tileMap.y = stage.stageHeight * 0.5 - tileMapSizeV * 0.5;

	for each ( var tile in tileArray )
	{
		if ( tile.valid )
		{
			tile.n.zPos == tile.s.zPos ? tile.ver = true : tile.ver = false;
			tile.e.zPos == tile.w.zPos ? tile.hor = true : tile.hor = false;

			with(tileMap.graphics)
			{
				lineStyle(1, 0xaaaaaa);

				//bottom
				moveTo(tile.n.xPos, tile.n.yPos);
				lineTo(tile.e.xPos, tile.e.yPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				lineTo(tile.w.xPos, tile.w.yPos);
				lineTo(tile.n.xPos, tile.n.yPos);
			}
		}
	}
	addChild(tileMap);
}

makeGrid();
makeTiles();
placeNodes();
drawNodes();
drawTiles();

So this is the basic presentation mode. Tiles are valid if their row and column number is even. If so, the nodes are assigned a height value. These and only these valid tiles are drawn.
As you can see in the heightArray there are 16 possible combinations (4 nodes, two possible states, 2^4 = 16).

Part A.1: The Basic Tiles
The following chapters present the relevant drawTiles() function and their differences.

function drawTiles()
{
	var tileMap:Sprite = new Sprite();
	var tileMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
	var tileMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
	tileMap.x = stage.stageWidth * 0.5;
	tileMap.y = stage.stageHeight * 0.5 - tileMapSizeV * 0.5;
	tileMap.graphics.lineStyle(1, 0x000000);

	for each ( var tile in tileArray )
	{
		if ( tile.valid )
		{
			tile.n.zPos == tile.s.zPos ? tile.ver = true : tile.ver = false;
			tile.e.zPos == tile.w.zPos ? tile.hor = true : tile.hor = false;

			with(tileMap.graphics)
			{
				lineStyle(1, 0xaaaaaa);

				//bottom
				moveTo(tile.n.xPos, tile.n.yPos);
				lineTo(tile.e.xPos, tile.e.yPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				lineTo(tile.w.xPos, tile.w.yPos);
				lineTo(tile.n.xPos, tile.n.yPos);

				//sides
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				lineTo(tile.n.xPos, tile.n.yPos);
				moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.e.xPos, tile.e.yPos);
				moveTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				moveTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.w.xPos, tile.w.yPos);

				lineStyle(1, 0x000000);

				if ( tile.ver && tile.hor )
				{
					if ( tile.n.zPos > tile.e.zPos )
					{
						moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
						lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
					}
					else if ( tile.n.zPos < tile.e.zPos )
					{
						moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
						lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
					}
					//if both are the same, there is no line
				}
				else if ( tile.ver && !tile.hor )
				{
					moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
					lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				}
				else if ( !tile.ver && tile.hor )
				{
					moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
					lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				}

				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
			}
		}
	}
	addChild(tileMap);
}

The basic tiles are pretty simple but yet effective. The mountain height is lower than the middle of a tile so backface culling is not neccessary.

Part A.2: The Populous Tiles
Yay, Populous. Great game. What is different here regarding the basic tiles is the mountain height, var tileSizeM:int = 16; //mountain. Now there is one tile that has a hidden (being perpendicular to the viewing plane) face.

function drawTiles()
{
	var tileMap:Sprite = new Sprite();
	var tileMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
	var tileMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
	tileMap.x = stage.stageWidth * 0.5;
	tileMap.y = stage.stageHeight * 0.5 - tileMapSizeV * 0.5;
	tileMap.graphics.lineStyle(1, 0x000000);

	for each ( var tile in tileArray )
	{
		if ( tile.valid )
		{
			tile.n.zPos == tile.s.zPos ? tile.ver = true : tile.ver = false;
			tile.e.zPos == tile.w.zPos ? tile.hor = true : tile.hor = false;

			with(tileMap.graphics)
			{
				lineStyle(1, 0xaaaaaa);

				//bottom
				moveTo(tile.n.xPos, tile.n.yPos);
				lineTo(tile.e.xPos, tile.e.yPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				lineTo(tile.w.xPos, tile.w.yPos);
				lineTo(tile.n.xPos, tile.n.yPos);

				//sides
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				lineTo(tile.n.xPos, tile.n.yPos);
				moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.e.xPos, tile.e.yPos);
				moveTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				moveTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.w.xPos, tile.w.yPos);

				lineStyle(1, 0x000000);

				if ( tile.ver && tile.hor )
				{
					if ( tile.n.zPos > tile.e.zPos )
					{
						moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
						lineTo(tile.n.xPos, tile.e.yPos - tile.n.zPos * 0.5);
						lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);

						moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
						lineTo(tile.n.xPos, tile.e.yPos - tile.n.zPos * 0.5);
						lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
					}
					else if ( tile.n.zPos < tile.e.zPos )
					{
						moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
						lineTo(tile.n.xPos, tile.e.yPos - tile.e.zPos * 0.5);
						lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);

						moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
						lineTo(tile.n.xPos, tile.e.yPos - tile.e.zPos * 0.5);
						lineTo(tile.s.sPos, tile.s.yPos - tile.s.zPos);
					}
					//if both are the same, there is no line
				}
				else if ( tile.ver && !tile.hor )
				{
					moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
					lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				}
				else if ( !tile.ver && tile.hor )
				{
					moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
					lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				}

				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
			}
		}
	}
	addChild(tileMap);
}

Two tiles are a bit more complicated than in the basic version. And the code gives:

Part A.3: The SimCity Tiles
And those where the highest tiles, var tileSizeM:int = 24; //mountain. Thus, when shading the faces, some of them will be hidden, so backface culling might be neccessary.

function drawTiles()
{
	var tileMap:Sprite = new Sprite();
	var tileMapSizeH = ( nodeCols - 1 + nodeRows - 1 ) * tileSizeH;
	var tileMapSizeV = ( nodeRows - 1 + nodeCols - 1 ) * tileSizeV;
	tileMap.x = stage.stageWidth * 0.5;
	tileMap.y = stage.stageHeight * 0.5 - tileMapSizeV * 0.5;
	tileMap.graphics.lineStyle(1, 0x000000);

	for each ( var tile in tileArray )
	{
		if ( tile.valid ) {

			tile.n.zPos == tile.s.zPos ? tile.ver = true : tile.ver = false;
			tile.e.zPos == tile.w.zPos ? tile.hor = true : tile.hor = false;

			with(tileMap.graphics)
			{
				lineStyle(1, 0xaaaaaa);

				//bottom
				moveTo(tile.n.xPos, tile.n.yPos);
				lineTo(tile.e.xPos, tile.e.yPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				lineTo(tile.w.xPos, tile.w.yPos);
				lineTo(tile.n.xPos, tile.n.yPos);

				//sides
				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				lineTo(tile.n.xPos, tile.n.yPos);
				moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.e.xPos, tile.e.yPos);
				moveTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.s.xPos, tile.s.yPos);
				moveTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.w.xPos, tile.w.yPos);

				lineStyle(1, 0x000000);

				if ( tile.ver && tile.hor )
				{
					if ( tile.n.zPos > tile.e.zPos )
					{
						moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
						lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
					}
					else if ( tile.n.zPos < tile.e.zPos )
					{
						moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
						lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
					}
					//if both are the same, there is no line
				}
				else if ( tile.ver && !tile.hor )
				{
					moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
					lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				}
				else if ( !tile.ver && tile.hor )
				{
					moveTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
					lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				}

				moveTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
				lineTo(tile.e.xPos, tile.e.yPos - tile.e.zPos);
				lineTo(tile.s.xPos, tile.s.yPos - tile.s.zPos);
				lineTo(tile.w.xPos, tile.w.yPos - tile.w.zPos);
				lineTo(tile.n.xPos, tile.n.yPos - tile.n.zPos);
			}
		}
	}
	addChild(tileMap);
}

Next thing will be shading.

Yoho!