JavaScriptでのアニメーションのためのデータ作成について、ヒントをください。

http://www.sublimetext.com/ こちらのページの上部に、HTMLのcanvas要素を利用したアニメーションがあります。
一枚の画像にアニメーションする箇所の断片をすべて詰め込んで(http://www.sublimetext.com/anim/command_palette_packed.png)、
command_palette_timeline=[{"delay":1811,"blit":[[0,0,800,450,0,0]]},{"delay":48,"blit":[[0,450,400,344,200,36],[66,982,63,15,0,36]]},{"delay":798,"blit":[]},{"delay":137,"blit":[[494,762,186,142,206,43],[239,505,42,111,552,131],　...}, ...]
こういった感じに、アニメーションするタイミングと画像の更新部分を指定したデータを用意して、ソース画像を切り出しながら再生しています。

このデータを制作する方法がわかりません。今自分でやろうとすると、一般的な画像編集アプリケーションを使って、手作業で画像をまとめたり座標を指定したりしか思いつきません。

上記のような、断片をまとめた画像と更新シーケンスのデータを作成するには、どのような方法があるでしょうか。
ツールやアルゴリズム等ヒントがありましたら教えてください。