Updated Oct 06, 2009 by jwopitz
Labels:	Phase-Implementation, tutorial

as3isolib_tutorial_004

Introducing the IsoSprite class

tutorial

The IsoSprite class is the base class used to display non-drawing API created visual assets in a 3D isometric space.

In this example I have created a tree from two images. The first image is the tree trunk, the other is the leaves of the tree. In order to provide realistic isometric depth sorting, each visual asset is presented into its own 3D isometric bounding box. This allows objects without elevation (object.z = 0) to be able to appear under the leaves of the tree if need be. Obviously this isn't necessary for visual assets that have similar proportions. Assume for the moment a tall, slender tree whose leaves do not extend too far beyond the extent of the trunk. In this case a developer could composite both the trunk and leaves visual assets into one IsoSprite.

code

package 
{
	import as3isolib.display.IsoSprite;
	import as3isolib.display.primitive.IsoBox;
	import as3isolib.display.scene.IsoGrid;
	import as3isolib.display.scene.IsoScene;
	
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
	
	public class IsoApplication extends Sprite
	{
		private var scene:IsoScene;
		private var assets:Object;
		
		private var loader:Loader
		
		private function loadAssets ():void
		{
			loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.INIT, loader_initHandler);
			loader.load(new URLRequest("assets/swf/assets.swf"));
			
		}
		
		private function loader_initHandler (evt:Event):void
		{
			buildScene();
		}
		
		private function buildScene ():void
		{
			scene = new IsoScene();
			scene.hostContainer = this; //it is recommended to use an IsoView
			
			var treeTrunkClass:Class = loader.contentLoaderInfo.applicationDomain.getDefinition("TreeTrunk") as Class;
			var treeLeavesClass:Class = loader.contentLoaderInfo.applicationDomain.getDefinition("TreeLeaves") as Class;
			
			var grid:IsoGrid = new IsoGrid();
			grid.showOrigin = false;
			scene.addChild(grid);
			
			var s0:IsoSprite = new IsoSprite();
			s0.setSize(25, 25, 65);
			s0.moveTo(50, 50, 0);
			s0.sprites = [treeTrunkClass];
			scene.addChild(s0);
			
			var s1:IsoSprite = new IsoSprite();
			s1.setSize(125, 125, 100);
			s1.moveTo(0, 0, 75);
			s1.sprites = [treeLeavesClass];
			scene.addChild(s1);
			
			scene.render();
		}
		
		public function IsoApplication ()
		{
			loadAssets();
		}
	}
}

In order to render visual assets correctly so that appear in the expected 3D isometric coordinate space, a bit of asset preparation is necessary. The example assets were prepared in the Flash IDE and then exported for AS3 along with the SWF.

The tree trunk asset was assigned the following properties - width:25, length:25, height:65. Make note of the origin point of the MovieClip within the Flash IDE.

The tree leaves asset was assigned the following properties - width:125, length:125, height:100. Again making note of the origin point of the MovieClip within the Flash IDE.

In order to eliminate the need to use offset calculations, all IIsoDisplayObjects present their origin in the same fashion. If you were to imagine any 3D volume in isometric space, assuming that any visual assets does not extend into any of the negative octants of space, the origin would reside at the top corner (in screen orientation) of the bottom face.

Comment by cyberoptics, Dec 23, 2008

How do you recommend doing the actual terrain. I have isometric tiles, and rectangular tiles. Normaly I load a png, and make a large bitmap based on xml...

Comment by tensilecolt, Jul 20, 2009

I kind of have the same question as cyberoptics. How would I load in .png tiles and show them on the grid ?

- Kevin

Comment by jwopitz, Jul 28, 2009

Sorry I just saw these comments. If you are dealing with variable height terrain much like Tactics Orge for the DS or Final Fantasy Tactics, then you need to apply the terrain image to the actual terrain sprites and assign a size to those objects. If you are talking about flat terrain, you have multiple options:

get a prerendered isometric terrain and apply to the backgroundContainer of the IsoView?
create a sub scene that contains just one huge isometric sprite and apply a fill. The image should not be skewed to appear isometric in a browser but would be applied much like you would apply a material in say pv3d.

I recommend the first option if the image is not too huge. Otherwise you might look at applying it to multiple IsoRectangles? and apply the fill. Then as you pan your scene, the IsoView? will determine which objects will be present in the display list.

Again sorry for the late reply. I would suggest using the user forum instead as it notifies me when someone has posted a question.