Pixi.jsを初めて触って簡単にアニメーションを作成してみた話（その3）

こんにちは。CTOのづやによる、Pixi.jsのお話のその3です。
今回は、Pixi.jsがカテゴリ化されるところまで頑張りたいと思います。

• Pixi.jsを初めて触って簡単にアニメーションを作成してみた話（その1）
• Pixi.jsを初めて触って簡単にアニメーションを作成してみた話（その2）

今回は複数画像を一挙に扱えるスプライトシート機能を使ってみました。

スプライトシート用の素材を作成します

名前の通りCSSスプライトのようなものなのですが、画像とJSONの組み合わせで利用します。

こんな画像と

{"frames": {

"1.png":
{
	"frame": {"x":2,"y":2,"w":100,"h":69},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":100,"h":69},
	"sourceSize": {"w":100,"h":69},
	"pivot": {"x":0.5,"y":0.5}
},
"10.png":
{
	"frame": {"x":2,"y":73,"w":100,"h":69},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":100,"h":69},
	"sourceSize": {"w":100,"h":69},
	"pivot": {"x":0.5,"y":0.5}
},

======= 長いので省略 ======= 

"9.png":
{
	"frame": {"x":2,"y":712,"w":100,"h":69},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":100,"h":69},
	"sourceSize": {"w":100,"h":69},
	"pivot": {"x":0.5,"y":0.5}
}},
"meta": {
	"app": "http://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "sample.png",
	"format": "RGBA8888",
	"size": {"w":104,"h":783},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:de7b216858c28174d86df96d04f09f3f:dad30dc4bcac174cb70b25ee59e1af45:21968a933adcc6a4544a530754d83304$"
}
}

こんな感じの情報をもったJSONファイルをつくります。

手動で作ってもよいのですが、TexturePackerってツールでJSON（HASH）を選択してつくると便利です。（有料です）

実際に読み込んで使ってみる

Pixi.jsからの読み込みはこんな感じでできます。

// 読み込みたいJSONをもった配列を定義
var assetsToLoader = [ "img/sample.json"];

// ローディング処理を行ってくれるローダーを作成
var loader = new PIXI.AssetLoader(assetsToLoader);

// ローディング完了後に呼ばれる関数を指定
loader.onComplete = onLoaded;

// ロード開始
loader.load();

// ロード後に呼ばれる関数を用意しとく
function onLoaded() {
　　　// 名前ベースで画像情報をもったスプライトが作れます
　　　var imgObj = PIXI.Sprite.fromFrame("欲しい画像の名前(JSONに書いてあるはず)");

     // あとはお好きなように利用してください
}

けっこう簡単ですね。
大量に画像を使いたいときなどは便利に使えそうな感じですね。
長いのでコードは載せてないですが、デモを作ってみました。

終わり。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。