UGUI使い方メモ(テクスチャー編)

2019年11月14日 12:48

🔰テクスチャーを作る上での基本🔰

①テクスチャは2のべき乗で作るのが望ましい

Unity で他のテクスチャサイズ（ 2 のべき乗でない - “NPOT”）を使用することも可能。2 のべき乗でないテクスチャサイズは一般的により多くのメモリを使用し、GPU による読み込みが遅くなるため、パフォーマンス観点では出来るかぎり 2 のべき乗サイズを使用を推奨。ただし、Sprite Packer/SpriteAttlasを使用するのであれば、パックする前の個別のテクスチャサイズはどんなのでも問題無し。パックされた時に2のべき乗サイズテクスチャにまとめられるため。

②αが不透明以外の部分が広いほど処理に時間がかかる

テクスチャでαが不透明以外の部分は上から半透明かどうかの計算が入ることになるので、その面積が広いほど計算に時間がかかることになる。例えば、枠だけで中央部分は抜き状態のウィンドウを作るような場合、「Fill Center」のチェックを外して中央部分の描画を消してしまった方が描画処理が軽くなる。

③テクスチャの上下左右は1ドット抜きを付ける

Unity上でRotationを使用して傾きを付けているオブジェクトのテクスチャは、上下左右の端1ドットを必ず抜きにしておくこと。↓参考画像

④AndroidとiOSではテクスチャーの圧縮形式が異なる
iOS:「PVRTC」「ASTC」 Android:「ETC」「ETC2」「ATC」

Androidの圧縮形式で採用しているETC2フォーマットは、透過の無い画像の場合、強制的に形式をRGBに変更してしまう。
これにより、同じPackingTagを付けていても、透過のあるRGBAと透過の無いRGBで２枚のアトラスに分かれてしまっていた。

全面ベタ画像（RGB）への対応方法：スライス無しの白ベタ板の場合→各所に新規に作成せずに、専用の共通テクスチャを使用すると由

テクスチャーをパックする時Androidの場合はテクスチャーサイズが長方形でも問題無いが(例：256×128のサイズでもOK)
iOSは圧縮形式の問題で強制的にテクスチャーが正方形になってしまう。(例：128×512→512×512になる)

🔰SpriteAttlasの作り方🔰

Unity2017から追加されたatlas(UIの画像)をまとめる仕組み。
SpriteAtlasをリソース(アセットバンドル)に含めるとテクスチャー容量が2倍になる。そのためspriteatlasはresourceの外にフォルダーを作って格納するのが良い。テクスチャー(UIの絵)はresource内にあってもOK。

FilterModeの内訳
・pointは元画像をそのまま拡大縮小(解像度によってカクカクする)
・bilinearは元画像にちょいぼかしをかけて表示
・trilinearは距離によって画像のぼかしを調整(3Dなどで距離によって画像のボケ幅を調整する時に使うUIは使わない)
[処理スピード]
point > bilinear > trilinear
[クオリティ]
trilinear >point / bilinear

リニア色空間とガンマ補正の話

①SpritePackerのModoをAlwaysEnabledへ変更

パッカー01

②Asetts以下にUIと更に下に画像を入れるフォルダーをつくる

パッカー02

③テクスチャーの設定を変更する

テクスチャー設定

④SpriteAtlasを追加します

パッカー03

⑤パックするフォルダーを指定する

テクスチャーの参照先

⑥最後にPackPreviewを押すと反映されます

パックプレビュー

⚠フォルダー名に注意⚠
フォルダー名を全て【texture】で統一してしまうと、パックするフォルダーを指定する時にどの【texture】なのか参照先が分からなくなってしまう。
例)『ui』＞『button』＞『texture』✖
例)『ui』＞『toggle』＞『ui_toggle_texture』〇

フォルダーの命名規則について