Avatar Animations

For each avatar, we render a number of "sprite sheets" - graphics which contain different animation frames for the avatar.

Using these images and information about which frames comprise each animation sequence, you can use animated Glitch avatars in your own apps.

There is a single import API call which returns the URLs to the sprite sheets and the frame sequences, players.getAnimations. When you pass a player TSID, it returns two main sections, sheets and anims We'll look at the sheets first.

Sheets

"sheets" : {
	"base" : {
		"cols"   : 7,
		"rows"   : 1,
		"frames" : [103, 104, 105, 106, 107, 108, 109],
		"url"    : "http://c2.glitch.bz/avatars/2011-07-20/89..."
	}
}

This example tells you about a sheet called "base". It contains a grid of 7x1 frames, with the IDs 103, 104, 105, 106, 107, 108 and 109 and has a URL. The size of the individual frames is not defined - you'll need to load the image to calculate that. Every frame on a single sheet is the same size, so after you load the image you can find the width of a frame by dividing the total sheet width by 7 (columns). The frame height will be the total sheet height divided by 1 (rows).

For example: If the sheet image is 700x150 pixels, you know that each frame will be 100x150 pixels in size.

The frame IDs are just pointers used in the animations. If an animation requires frame 108, you know that it's found in the "base" sheet, that it will be 100x150 pixels and can be found at position (500,0) in the image.

Animations

"anims"	 : {
	"angry" : [625, 626, 627, 628, 629, 630, 631, 632, 633, 634, 635,
			636, 637, 636, 635, 636, 637, 636, 635, 636, 637,
			636, 635, 636, 637, 636, 635, 636, 637, 636, 635,
			636, 637, 636, 635, 636, 637, 636, 635, 636, 637,
			636, 635, 688, 689, 690, 691, 691, 691, 691, 691,
			691, 691, 691, 691, 691, 691, 691, 691, 691, 691,
			691, 691, 691, 691, 691, 691, 691, 691, 691, 691,
			691, 691, 691, 691, 691, 691, 691, 691, 691, 691,
			691, 691, 691, 691, 691, 691, 691, 691, 691, 691,
			691, 691, 691, 692, 693, 694, 625]
}

The anims block contains a list of animations and the frames that comprise them. In this example, you can display the angry animation by displaying the numbered frames in the order shown. Animations are meant to be shown at 30fps, or about 33ms per frame.

You'll notice that the sequence contains sequential frames with the same ID. This is done to simplify implementation. If you're concerned about processing speed (e.g. for mobile apps) then instead of redrawing frame 691 48 times in a row, you could instead display it for 48 times as long without a redraw.

Examples

We've put together a quick demo using JavaScript and Canvas in the browser to show how you can use animations in your own applications. You can take a look here.