ゲームやWebサイトで使っている細かいアイコンなどを集約してくれるスプライト画像は便利な仕組みなのです。しかし作るのはもちろんのこと、その後の更新まで考えると非常に面倒で次第にスプライト以外の画像が増えてしまっていたりしないでしょうか。 Spritesheet.jsはそんなスプライト画像の生成を一手に行ってくれるライブラリです。様々な場面で活躍してくれることでしょう。

Spritesheet.jsの使い方

Spritesheet.jsは以下のように画像を渡すだけです。

$ spritesheet-js *.png
Spritesheet successfully generated

そしてJSONファイルが生成されます。中を見ると次のように書かれています。デフォルトはStarling用で、他にもSparrow、PIXI.js、Easel.js、cocos2d、CSSがサポートされています。

{
	"meta": {
		"image": "spritesheet.png",
		"size": {"w":1100,"h":776},
		"scale": "1"
	},
	"frames": {
		"programmers-qa-1.png":
		{
			"frame": {"x":0,"y":0,"w":550,"h":259},
			"rotated": false,
			"trimmed": false,
			"spriteSourceSize": {"x":0,"y":0,"w":550,"h":259},
			"sourceSize": {"w":550,"h":259}
		},
		"programmers-qa-2.png":
		{
			"frame": {"x":0,"y":259,"w":550,"h":259},
			"rotated": false,
			"trimmed": false,
			"spriteSourceSize": {"x":0,"y":0,"w":550,"h":259},
			"sourceSize": {"w":550,"h":259}
		},
    :
}

画像をトリムしたり、透明部分をクロップしてくれる機能があります。思った形にスプライトを作る場合には不要ですが、透明な部分が不要な時には使えそうです。ゲーム開発でもWebサイトでも使えるのが便利ですね。

Spritesheet.jsはnode/JavaScript製、MIT Licenseのオープンソースソフトウェアです。

krzysztof-o/spritesheet.js