kei3.jp | head -n 10 diary

便利ツールの紹介って事ではなく、以前から悩んでいる事。

UnityのUIに限らず、iOSアプリのRetina対応画像を作る方法。一度はFireworksで作ると言う判断に落ち着いたのですが、やはり不便。特にUnityのUI用として画像を良いする場合、512x512とか1024x1024として用意した方が良いので、そのサイズの中に複数の画像を入れる必要が有る。勿論、これだけの事だったらFireworksで、ボタンなどを複数並べて書き出せば良いので、問題は無い。しかし、CSS Spriteもそうだが、画像以外に何処にどのくらいの大きさのボタン画像が有ると言う情報が別に必要。CSS SpriteだったらCSSファイルとして。Unityで利用する場合も、使っているライブラリーに応じて必要になる。もともと、Fireworksはウェブ用なので、デフォルトで対応してないのは仕方ないのだが、書き出し部分の機能拡張が自前で作れれば何とかなりそうなんだけどな。しかし、今は時間がない。で次の方法。

前提として、UnityのUIにUIToolkitを使う事として、UIのボタン画像はFireworksでRetina用(2x)を基準に作る。CSS Spriteとして使う訳ではないので、ボタンをシンボル化してもOK。書き出す時には全てPNG 32で書き出します。ここからは、TexturePackerを使う。もともとUnity用の書き出し設定は無かった様に思うのだが、都合が良い事に、現在はUnity用の出力が有るのでこれを利用します。設定としては、Data fileをMyUI2x.txtみたいにRetina用の設定をまず行います。低解像度用はAutoSDで設定を行います。この設定を行わないと2x用のファイルしか書き出しが行われません。

AutoSDの設定

Main Extention 2x
Scale 0.5
Extention (空欄)

その他、Geometryで正方形に強制的になる様にForce Squaredにチェックを入れます。あとは、Fireworksで書き出した画像をSpritesに追加してPublishするだけ。(UIToolkit自体にTexturePackerのサンプルが入っているので参考にすると良いと思います。)

手順としては、難しく無いのですが、納得行かないんですよね。一度バラバラに書き出したモノを再びまとめて書き出すってのが、納得行かないな。JPEGで書き出したりしている訳ではないので劣化はしないと思いますが、気持ち悪い。スッキリしないな。他に良い方法をご存知の方が有ったら教えてほしいです。

TexturePacker自体は、良いツールですよ。自分で作った画像でないモノ(アイコンなど)をまとめたり、以前作ったサイトの画像をCSS Sprite化する場合などとっても便利だと思います。自分で作ったライブラリーから必要なモノをまとめて使い場合なんかも便利かなと思います。毎回毎回専用にデザインしたモノばかりでない時とか、頻繁に使い回すなんて事があるアイコンなんかはTexturePackerで必要なモノだけ集めて書き出せば余計な画像を埋め込まなくて良いですからね。

prime31/UIToolkit · GitHub
>>関連リンク

TexturePacker - Create Sprite Sheets for your game!
>>関連リンク