よりぶろ

アプリのUIとかについて書いてく予定

PNG EXPRESS 2.0.1 を試す

これまでも何回か紹介している PNG EXPRESS ですが、先日ついにメジャーアップデート版の 2.0.0 が公開されました。

目玉はエクスポート機能の拡大で、なななんと Android 版のパーツ書き出しを解像度ごとに出力してくれるとのこと。Adobe Generator も Slicy も対応していない時点で、これはかなり使えるのでは!(正確には Cut&Slice me というエクステンションがあるので、初めてというわけではないです)

興奮してさっそく入れてみた…ものの、うまく動かず、どうしようかなと思っていたところ、本日不具合修正を行った 2.0.1 が公開されました。

 

実は 2.0.0 でうまく動かない時点で作者さんに「こんな不具合出ました」とメール送ってて、それをきっかけに1週間近くやりとりをさせて頂きました。Google翻訳の拙い英語に付き合ってくださった Rune さん、ありがとうございます。

ちなみに不具合の原因は、英語以外の環境で使うとエクスポート時に固まる、というものでした。

 

さてさてその実力はと言うと、かなり使えるものとなっています。

f:id:ryo_pan:20131107132342p:plain

実力を試すためにこんなデータを作ってみました。

上から普通の、フォルダに効果、フォルダ内のオブジェクトに効果、境界線内側、境界線外側、中途半端なサイズ、です。

中途半端な、というのは、どっかしらの解像度で端数が発生するサイズ、ということです。サブピクセルが出るのか出ないのか、の実験です。

 

結果はと言うと、ある条件下であれば、パーフェクトに書き出してくれます。中途半端なオブジェクトも、四捨五入してピクセルパーフェクトに仕上げてくれます。

条件ですが、PNG EXPRESS が持っている1つのオプションと、2 通りのエクスポート方法が関係しています。

まずオプションですが、PNG EXPRESS には Scale safe という機能がついています。

f:id:ryo_pan:20131107133003p:plain

下で説明する Bounds 生成の際に選択できるようになります。これにチェックをつけると

f:id:ryo_pan:20131107133044p:plain

微妙に幅が変わります。ちなみにチェック付ける前がオブジェクトの正しい数値ね。

どういう判断基準で出るのかは分かりませんが、非Retinaでも偶数になるようにしている?のかな?

 

f:id:ryo_pan:20131107132724p:plain

 で、書き出し用のアクションには、アセット用のリネーム、Bounds の生成・パーツのエクスポートがあります。

実はわざわざ Bounds を生成しなくても、3つめのアクションからエクスポートが可能なのですが、その際にどうやらScale-safe機能が自動的にオンになるようで、幅ぴったりに書き出したかったパーツに若干のマージンが発生してしまいます。

また、マージンが発生したことによりサイズが中途半端な数値になり、他の解像度で端数が出た場合、サブピクセルが発生してしまいます。

つまり、

・パーツぴったり(レイヤー効果含む)に Bounds が設定されていれば、中途半端なサイズでも綺麗に出力してくれる

・Bounds がパーツの領域よりも外に出る場合、中途半端なサイズだとサブピクセルが発生してしまう

・Bounds を事前に生成せずにエクスポートした場合、Scale-safeが発動してサブピクセルが発生する

なので、ちゃんと Bounds を生成する必要があるということになります。

小さいパーツだと Bounds を広く作るのが一般的ですが、その場合はどの解像度でも端数が出ないように調整しましょう。

端数が出ないようにするためには Dip Calc というアプリがとても便利です!!!

Dip Calc

Dip Calc

  • Mitsuo Takatori
  • 仕事効率化
  • ¥100

 

さて Cut&Slice me との比較ですが、

・PNG EXPRESS は xxhdpi のエクスポートが可能

・Cut&Slice me は Bounds を自動生成してくれない

・Cut&Slice me は xhdpi の PSD を 100% と認識して出力する

・PNG EXPRESS は開いてる PSD の解像度を指定して、それを基準に出力する

・Cut&Slice me は無料

といったところでしょうか。

あ、ちなみにですが、スマートオブジェクトにしていると拡大時にぼやけますので、スマートオブジェクトを多用されている方はご注意ください。

(スマートオブジェクトでなければ、ベクターオブジェクトやレイヤー効果は綺麗に拡大されます)

 

最後に テストに使った PSD と出力結果のリンクを貼っておきますので、ご興味ある方はどんな感じになるのか見てみてください。

Dropbox - PNG EXPRESS_test.zip