Sprite Sheet Animation Viewer

A while ago I wrote a simple tool to preview character animation from a sprite-sheet. This was mainly intended for use by artists and animators.

I used my AminSprite class to actually play the animation, and added a few controls with the help of MinimalComps. The result is a small AIR desktop application that can read and preview sprite sheets.

The usage is simple: click ‘open’ and select a descriptor file. That will load the animation and show the character in the preview area. Now use the play panel to play any sequence and stop on any frame to inspect it. Change the zoom and frame rate with the controls on the display panel.

Typically a character has multiple animation sequences all on the same sprite sheet, so in order to easily add this info, the tool uses a JSON descriptor file to hold the necessary metadata for the character. The format is like the following:

{ 
   "base": "whackSheet",
   "totalFrames": 47,
   "seqList": [
	{  "name":"intoDive",
	   "loop": false,
	   "frames": "44-47"
	},
	{ "name":"bobbing",
	   "loop": true,
	   "frames": "1-23"
	},
	{ "name":"digging",
	   "loop": true,
	   "frames": "24-43"
	}
   ]
}

The descriptor goes on the same folder with the sprite sheet files (a PNG image and an XML or JSON file ). The tool’s loader parse the file and uses the data to create an AnimSprite and populate it with the sequences. I included a sample data animation so you can check it out.

Note that ‘base’ is the base name for the intended sprite sheet.  I originally made it to read JSON format sheets, but now that Starling is popular I added support for XML Sparrow/Starling format. So a sheet is supposed to have a PNG file and either JSON or XML file.

Each sequence is defined by name (for external reference),  a loop indicator (true/false) and a frame range. The ‘frames’ will parse a string with comma separated indexes (1-based) and/or ranges in the format ‘a-b’.

The heart of the viewer logic is in the AnimLoader class. Once it’s done loading the sprite sheet, it calls this function:

	// Usage: call this function after all assets have been loaded
	//
	public function createAnimSprite():AnimSprite
	{
	    var anim:AnimSprite = new AnimSprite();
 
	    var sheetImg:Bitmap = _dataLoader.getLoadedAssetById("sheetBmp");
	    _texSheet= helper.prepareAnimTexture(sheetImg.bitmapData, _dataLoader.getLoadedAssetById("sheetData"));
	    anim.initialize(_texSheet);
 
	    // Get the sequence list from the descriptor
	    var seqList:Array = _descData.seqList;
	    var seqInfo:Object;
	    var arFrames:Array;
 
	    // Add each sequence into the anim-sprite
	    for (var i:int = 0; i < seqList.length; i++) {
		seqInfo = seqList[i];
		arFrames = parseArray(seqInfo.frames, true);
 
		anim.addSequence(seqInfo.name, arFrames, 60, seqInfo.loop);
	    }
	    log("Animation is ready.");
 
	    return anim;
	}

 

For now the descriptor files are created by hand. That’s only a minor inconvenience since you only need to do it once per character.

The tool’s source  is freely available to download in zip from here, or from the spritesheet git repository.

 

, , , , ,

One Response to Sprite Sheet Animation Viewer

  1. Efrain December 21, 2012 at 6:03 am #

    yes great work man when you can would like to talk with you as to any new game project you are working on in unity3d if any i am owner of ECR Investments