TexturePackerとEaselJS

TexturePacker

今更ですが、TexturePackerを導入してみました。

開発系ブログやフレームワークの製作者は無料になる事を知り、早速申し込んだのです。

丁度良く、CreateJSを触ってみる事にしたので、EaselJSのSpriteSheetで使うための画像を出力してみました。

TexturePackerには、EaselJSのエクスポーターも入っています。SpriteSheetのアニメーションには対応していないのは少しがっかりでしたが、Trimで透明部分をサクッと削ってテクスチャに詰め込む指定も対応していませんでした(´・ω・｀)

調べると、エクスポーターはテンプレートファイルを自分で書いて増やせる仕組みで、EaselJSもこの方法で出力していました。

そこで、Trimしたデータも出力出来るようにしてみました。

エクスポーター

注意点は、exporter.xmlで指定するテンプレートファイル名が重複すると、先に登録された方が呼び出されてしまうと言うことでしょうか。

exporter.xmlのsupportsTrimming要素をtrueにしておくと、エクスポーターを選択した時に自動でtrimになるので便利です。

<supportsTrimming>true</supportsTrimming>

trimで画像が欠けた分を指定しますが、EaselJSにはそう言う指定がないので、regXとregYを指定して画像の基準点を指定しておきます。

regXを-{{sprite.sourceRect.x}}、regYを-{{sprite.sourceRect.y}}とすると出来上がりです。

"frames": [
{% for sprite in allSprites %}    [{{sprite.frameRect.x}}, {{sprite.frameRect.y}}, {{sprite.frameRect.width}}, {{sprite.frameRect.height}}{% if sprite.trimmed %}, 0, -{{sprite.sourceRect.x}}, -{{sprite.sourceRect.y}}{% endif %}]{% if not forloop.last %},
{% endif %}{% endfor %}
],

元のEaselJS.jsonと改行位置が違いますが、テキスト整形が綺麗になるように弄ってます。

この様にEaselJS.jsonを書き換えてEaselJS-trim.jsonとして新しいエクスポーターにしてみました。

sprite.trimmedはTrim modeがCropだとtrueにならないので注意です。

テンプレートでjavascriptを使う

ついでにテンプレートで複雑な出力の方法を調べてみました。

grantlee\0.2\と言うフォルダを掘って、拡張子をqsにしたjavascriptを配置するとテンプレートの{{}}で括られたプロパティにフィルタとして使えます。

{% load ファイル名 %}とqsファイルを読み込んでから、{{property|filter}}とするとfilter関数の引数にpropertyが入り、filter関数の戻り値と置き換えられます。

詳しくはドキュメントを読んだ方がいいですね。

空文字を返すフィルターを使って、変数に値を読み込んで演算に利用するトリックが参考になります。