the official as3isolib blog

actionscript3 isometric library (v1/v2)

Sprite Sheet Rendering Prototype

Since as3isolib.v2 will be making heavy use of the bimtapData APIs I figured it would be useful to have some Sprite Sheet mechanics in place.  After looking around at PBE’s spritesheet APIs, and some other as3 tools out there, I decided to try to take a stab at a versions specifically tailored to as3isolib.v2’s render process.

Keep in mind everything you see related to the v2 APIs is subject to change.  We’re not even in Beta yet.

So rather than reinventing the wheel and tooling out some SpriteSheet assembler in AIR, I searched around and found Texture Packer – http://j.mp/ffr0BC It’s free and does what I need for now.  It outputs a composited sprite sheet image and an XML data file to describe the tile sets.  So for my test case I decided to make 6 different types of terrain.  Here are the output files from Texture Packer:

Here is the output XML (via snipt)

So far the renderer looks like this (via snipt):

package testing.renderers
{
	import as3isolib.v2.core.BaseEntityImpl;
	import as3isolib.v2.core.BaseObjectRendererImpl;
	import as3isolib.v2.data.RenderData;
	import as3isolib.v2.utils.RenderDataUtil;

	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.geom.Rectangle;

	public class TerrainObjectSpriteSheetRenderer extends BaseObjectRendererImpl
	{
		[Embed( source="assets/images/spriteSheet.json.xml", mimeType="application/octet-stream" )]
		static private const SPRITE_SHEET_DATA_CLASS:Class;

		[Embed( source="assets/images/spriteSheet.png" )]
		static private const SPRITE_SHEET_IMAGE_CLASS:Class;

		public function TerrainObjectSpriteSheetRenderer()
		{
			if ( !isRenderDataInitialized )
			{
				initializeRenderData();
				isRenderDataInitialized = true;
			}
		}

		static private var renderDataArray:Vector.<RenderData> = Vector.<RenderData>([]);

		static private var isRenderDataInitialized:Boolean;

		static private function initializeRenderData():void
		{

			var rect:Rectangle = new Rectangle();
			var bmp:Bitmap = new SPRITE_SHEET_IMAGE_CLASS();
			var clone:RenderData;

			var src:RenderData = RenderDataUtil.getRenderData( bmp );
			src.xOffset = -62;
			src.yOffset = -102;
			src.leftSpillover = 12;
			src.rightSpillover = 10;

			var xml:XML = XML( new SPRITE_SHEET_DATA_CLASS());
			var node:XML;
			var nodes:XMLList = xml..SubTexture;

			for each ( node in nodes )
			{
				//create the renderData objects
				clone = src.clone() as RenderData;
				clone.cx = int( node.@x );
				clone.cy = int( node.@y );
				clone.cw = int( node.@width );
				clone.ch = int( node.@height );

				renderDataArray.push( clone );
			}
		}

		override public function render( target:BaseEntityImpl ):RenderData
		{
			var i:int = Math.random() * renderDataArray.length;
			return renderDataArray[ i ];
		}
	}
}

The end result is as expected:

Once I get an idea how this will work, I plan to build an AIR util (possibly with ZaaLabs’ Eden tool) to assemble a BaseObjectRendereImpl subclass that gets placed right into your project.  So it saves from coding the renderer.

Let me know your thoughts.  Thanks.
Justin

 

Advertisements

3 responses to “Sprite Sheet Rendering Prototype

  1. niraj March 28, 2011 at 10:26 pm

    Hi,
    I have used as3isolib in one of my game its fantastic
    i want to to draw your attention on the molehill api
    do you have ani api on porting as3isolib to use molehill for rendering

    thanks
    Nriaj

    • jwopitz March 29, 2011 at 9:17 am

      I do eventually see as3isolib.v2 making use of the Molehill APIs. No plans for the as3isolib.v1 at this time.

  2. Andreas Loew June 2, 2011 at 5:07 am

    Hi,

    I am the author of TexturePacker. Just wanted to ask if I could help you somehow…
    Is the format sufficient for you? Do you need any enhancements?

    Cheers
    – Andreas

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: