Edited at

Unity uGUI UIテクスチャフォーマット選択フローチャート

More than 1 year has passed since last update.


Unity uGUI UIテクスチャフォーマット選択フローチャート(2017年末現在)

去年はUnityモバイル開発でのUIテクスチャのフォーマット選択に苦しめられました。

UnityではプラットフォームとグラフィックAPI、各種GPUによって圧縮フォーマットの制限やSpritePackerが使えなくなることによる管理の複雑さ、それらを回避するための開発コストの増大など考慮する点が多く、現状のプロジェクトの状態をみて取捨選択をする必要があります。

なので今回は2017年末時点でのUIテクスチャフォーマットを選択するためのフローチャートをつくってみました。フォーマット選択の指針にしてもらえれば幸いです。

個人が調べた範囲でのものになるので何かまちがいや抜けがあった場合はご連絡いただける助かります。

とりあえず個人的なおすすめは「RGBA16」です。


フローチャート


①RGBA16(オススメ)

このフォーマットだとios、android同じフォーマットでUnityのuGUIやSpritePackerなどの標準の機能を使って問題なく開発できます、またこの状況で開発していればそもそも素材の容量やパフォーマンスに気を遣い作る必要性があるので今後パフォーマンス不足でテクスチャフォーマットを変更することもできるためです。ただし、メモリ消費や描画負荷は他のフォーマットの方が低くなり、デザインへの制限も出てくるのでプロジェクト初期に作りかたをプロジェクトで共有する必要があると思います。あと減色だけなので基本劣化しないです。

デザイナーにはuGUIやテクスチャフォーマットの知識をつけてもらって最小限の素材を使い回すようにUI設計してもらう必要がありますが重複したUIなどができにくく今後のプロジェクトにもプラスになるはずです。

いったん減色できないようにつくりはじめてしまうと全体的に調整する必要が出てくるので注意です、作り始める前に話し合っておきましょう。


②「ios : astc」「 android : etc2」

こちらのフォーマットは古い端末を切り捨てることでクオリティを維持しつつ①と同様の開発のしやすさとメモリと描画負荷を最小に抑えることができます。対応端末はiphone6以上OpenGL ES3以上のandroid端末です。それ以下の端末で動かした場合は元テクスチャ+RGBA32でメモリ展開されて低スペック端末にさらに負荷がかかる状態になります。

すべてのモバイル端末でこれらのフォーマットが使えるようになった時心の平穏が訪れる気がします。


③それぞれGPUやグラフィックAPIに対応したフォーマット

これはios、androidの各種GPUに対して適切なフォーマットのアセットバンドルを配信することで実現できます。

この場合はUIをアセットバンドル化してそれぞれのテクスチャフォーマットのアセットバンドルを作り分ける(アセットバンドルを作り分ける環境、アセットバンドルビルド時間が増える、ダウンロードシステム開発など)必要があるので開発コストや管理コスト、確認コストが上がります。お金と人材と時間が余るほどないと厳しいと思います。


④「ios : pvr(アルファマスク)」「 android : etc(アルファマスク)」

この方法はアルファマスクを使うことでpvrとetcでアルファ付きの素材のクオリティを維持しつつメモリ消費を削減、パフォーマンスもほどほどよくといった感じのバランス良い感じになります。

ただしUnityのUIアトラスに対してアルファマスクを作る必要があるためSpritePackerの機能が使えなくなることとuGUIシェーダーをアルファマスクに自前で対応させる必要が出てきます。そのため作り方によってuGUIのSetPassが増えやすくなるなどのデメリットがあります(本来は標準シェーダーをつかうことでUIのSetPassが最小に抑えられる)。


そもそも論

Unityではすぐゲームが動いてしまうため制作フローやフォーマットを決めないまま開発が進んでしまうことがよくあるみたいです。

ただそういった状態で進めると描画負荷やメモリ消費、開発コスト増大など開発中盤以降に押し寄せてきます。

なので最初からuGUIの機能を理解して不要な素材をへらしたり、共通のUIを使いまわしたり、減色に耐えられるデザインになっていたりということのほうが重要です。ので、ある程度最初に決めて、のちに起こる問題を排除しましょう。

デザインの注意点としてはグラデーションを避ける(減色したときに荒れる)、半透明を避ける(pvrで荒れる)、uGUIの機能を考慮した素材にする(スライス、色変え、スケーリング)、2048x2048ぐらいに全部収まるくらいを目指すようにしとくなどがあります。


まとめ+Unityへの提案

状況によってテクスチャフォーマットの選択が必要になることが伝わったでしょうか。

最大限の端末に対応する場合は現状ではRGBA16がオススメです、参考になれば幸いです。

SpritePackerを使うことでetcでもSplit alpha channelの機能でandroidの古い端末には対応できます。ただしiphone5や5sを対応する必要があるならpvrを使う必要が出てくるためアルファ付きのテクスチャは荒れます(作り方にもよりますがグラデーションや半透明を多用しているとUIでは許容できないレベルになると思います。)

個人的に決定的な解決策としてはUnity側でpvrもetcと同じようにSplit alpha channelの機能を使えるようにすることなんじゃないかなと思います。

またUnity2017.3でiosでもetc2が使えるようになるようでなのでiphone5はもう捨てるとして

「ios - etc2 : android - etc(Split alpha channel)」

がベストな選択肢になるかもしれません。※1

もしこの記事の盲点や他になにかいい方法があればご連絡お願いします。


参考

アルファ入りの PVRTC を奇麗にするコツ

https://github.com/keijiro/unity-pvr-cleaner

【Unity】iOSでASTCフォーマットのテクスチャ圧縮を使う

http://tsubakit1.hateblo.jp/entry/2016/09/28/235632

【Unity】iOSでもETC2が使えるようになった。

http://tsubakit1.hateblo.jp/entry/2017/11/22/001941

UnityでiOS向けのETC2 Textureを作る(Unity2017.3)※1

https://qiita.com/jun_moka/items/47240033d244370c9e6c

Unity iOS/Android におけるテクスチャ画質の改善

http://www.keijiro.tokyo/posts/mobile_texture_compression