ゲームUIメモ

ゲームUIのデザイナーが、気になったことを時々書きます。

【Unity】デザイナー向け画像関係メモ

開発-Unity 参考資料

Unityの話とNGUIの話が混ざっています。
今年の頭ぐらいにまとめたものです。UnityやNGUIのバージョンの関係で今は異なる仕様もあるかもしれません。
補足、修正指摘、大歓迎です。

[目次]

  • 画像圧縮形式の種類と特徴
  • 透過
  • マスク
  • パターン
  • NGUIとUnityの画像処理の関係
  • NGUIでの画像処理タイプ

画像圧縮形式の種類と特徴

RGBA

圧縮の原理はpngに似ている。
詳しくは参考記事で。 ディザをかける場合、少し大きいサイズで書き出しUnity上で縮小してもらうとディザをごまかすことも可能。アトラスサイズと要相談。

通常使うのはRGBA16bit。色数が少し少ないためディザなどの処理が必要。アルファの階調も落ちるので注意。
色を劣化させず使いたければRGBA32bit。32bitは重いので局所的に使うのに留めたい。
画像サイズは最大 2048 x 2048px

参考になる解説： Unityやるには必須！RGBA画像減色の基礎をまじめに書いてみた | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

RGB

RGBAのアルファ無し版。
RGBAよりアルファが無い分、色数は少し増える。
メモリサイズは変わらない。
これを使うならPVRTC/ETCを使ったほうがいいんじゃねってことで、利用する機会はあまり無い。

PVRTC/ETC

圧縮の原理はjpegに似ている。
使用メモリはRGBAの1/4と優秀。

圧縮段階は2bitと4bitがあり、通常は4bitを使う。
2bitは4bitに比べて使用メモリが半分になるが全体的にボケが強い。

輪郭線など細かい範囲での色の落差の表現苦手。厚塗りとは相性いい。
PVRTCはiOS用の圧縮形式で、androidだとETCが使われる。
基本的な仕様は同じだが、ETCは透過を使えないので透過を使いたい場合は後述の方法を使う。

ETCのこの方法はめんどくさいし、PVRTCのアルファは汚いので透過は推奨しない。
結論。透過が必要な画像はRGBAでやる。

画像サイズは最大 2048 x 2048px
ただし、２のベキ乗の正方形しか扱えない。（128/256/512/1024/2048）

正方形でない画像は以下のいずれかの方法をとる。

  • 全部が収まるように長辺に合わせて画像を縮小する。隙間は放置
  • 正方形に完全にフィットするように比率を変えて縮小し、少しでも画像を大きく保存する

参考になる解説： Unityで、もっとキレイな16bitカラーテクスチャを使おう！ | OPTPiX Labs Blog

ETCでの透過

ETCはRGB情報しか保持できないので、アルファチャンネル用の画像を別に用意する。白が不透過で黒が透過。階調は256階調。
実際にはエンジニア側で元の画像をベースにアルファ専用画像はつくれるらしいので、デザイナーで別につくる必要はない。（らしい。使ったことはまだない）

PVRTCの原理

気になる人は「PVRTC圧縮のアルゴリズムとは？」を検索してみてみよう。面白い。

PVRTCの劣化対応

jpegに似ている方式のため、あらかじめ画像をぼかしておくことでPVRTC変換時の劣化を多少コントロールすることができる

アルファ8

アルファの256階調。
当たり前だが一番軽い。
利用する機会はあまり無い。

透過

画像自体に使える透過は通常の透過のみ。
乗算やスクリーンなどは対応していないので、制作時に気をつけること。

NGUIでの機能としての透過

画像に単色を乗算でのせることが可能。アルファの設定も可能（例：#333333のアルファ80%を乗算でのせる）
これを応用して、画像を白でつくることで、Unity上で自由に色を変えることができる。

乗算なのでグラデーション表現などにはくすみが入る場合がある。（グレーのグラデーションに乗算で色をかけると汚いよね）
単色の罫線やボタンなどに使いやすい手法。

マスク

簡単にできるのは以下の３種類のマスク。NGUIの機能

  • 水平方向
  • 垂直方向
  • 回転90°（画面左下支点）/180°（画面中央下支点）/360°（画面中央）の３タイプ

それ以外の形、複数要素をまとめてのマスクなどは工数がかかるのでエンジニアに相談のこと。

このマスクはスライスやパターンと共存できない。詳しくは下にある[NGUIでの画像処理タイプ]にて。

パターン

２種類の方法がある

頂点数の問題が大きいため、背景など広い範囲のパターンはTexture推奨。
パターンの一部を隠すマスクも併用したい場合はTiledを使う。

Textureのパターン

  • アトラスではないのでドローコールが１つ増える
  • 画像サイズはベキ乗の正方形でつくる必要がある

アトラスのTiled

  • パターンの間に隙間ができやすい
  • パターンの数が増えると頂点数も増え処理が重くなる
  • RGBA/PVRTCの両方で使用可能
  • パターンは途中で切ることもできるのでマスク的な扱いにもなる（垂直/水平）

文字につけられるエフェクト

ちょっと話はそれるが。文字周りはshadowとoutlineの二つのエフェクトがつかえる。（bitmapフォントは以前のバージョンでは使えなかったが、今は使えるようになっている）

  • shadow：元の文字と同サイズのものをx;y指定で位置を動かせる
  • outline : 元の文字の後ろに４枚複製し、上下左右に１枚ずつ、指定pxずらす。仕組みがもはや輪郭線ではないので、大きくずらすと見た目おかしい。せいぜい1pxが限度。

NGUIとUnityの画像処理の関係

[NGUIでの処理＞Unityでの処理]という順番

NGUIでは画像の表示面積を変更できる

UnityではNGUIで生成したオブジェクトの拡大縮小・回転などが行える。
このため、画像サイズを小さく（拡大縮小）してからパターンとして使うなどは行えない。

NGUIでの画像処理タイプ

この４タイプのいずれか一つから選ぶ。
なので、ナインスライスした画像をマスクするとかそういうのはできない。

[sprite type]

  • Simple
  • Tiled: パターン
  • Sliced: いわゆるナインスライス
  • filled: マスク

あんまり間違いとか勘違い多かったら消します。