最近は絵を描いたり、少し前にリリースされたゲームのエゴサしまくったりで、ぜんぜん記事に手が付けられていない状態。図らずも自宅待機で時間が取れるようになったので、グレースケールテクスチャの作成についてちょっと調べてみました
グレースケールテクスチャが大好きなので、このブログでもちょくちょく取り上げているのですが、今回取り上げるきっかけとなったは、Photoshopで作業していると、意図しない誤差拡散が入ることがたびたびあって、ずっと気になっていました
例えば下のような図の場合（500％に拡大）
自動選択ツールで１色だけ選択するようにして、（↓超絶推奨）
選択範囲を確認するとまだキレイな状態
そこで、カラーモードをグレースケールに変更
カラー情報を破棄するか確認されるのでOKすると、ぱっと見ではわからないけど・・・
選択範囲で確認するとしっかり誤差拡散が入っているのが分かります
これは、モニタで表現するときに、広範囲の色域を たかだか 256段階程度のグレースケールに落とし込むわけにはいかないとPhotoshopが気を利かせてくれているのではないか、と推測しています
とはいえ、途中に入るピクセルの分布にばらつきがあるのが謎ですが、これも高度な計算や配慮のなせる業なのでしょう。きっと。
実際グレースケールテクスチャを作る際は、カラーで描いたりせずモノクロで作業をするので、上記のような事態は起こりにくい、というか気づきにくいです
とはいえモノクロで作業すればゴミドットが入らないかといえば、少しは発生します
しかも、ベタ色の面積が大きくなるほど、謎のゴミドットの数が目立つようになります
そもそも
グレースケールテクスチャを作るのに、なぜカラーで作業するのか？
ゲームUIで使用するテクスチャは、テクスチャアトラスとも言ったりしますが、描画コストを少しでも抑えるために、できるだけいろんなパーツを詰め込んだ状態にします
私の場合は、UVの範囲を判りやすくするためにカラーで区分けしたものをレイヤーで管理しています
こうすることで、あとからパーツの配置を変えるときに便利だったり、何の部品か判らなくなることを防げます
また周囲がボケたパーツの範囲を明確にするというのも重要な役割です
パーツの表示サイズを調べるときもワンクリックで済みます
グレーのみだと色分けが難しいのも理由のひとつ
ゲームのUIは、開発中に何度もリサイズや仕様の変更が入ります
なので、この方法でテクスチャを管理する方がなにかと都合がいいのです
書き出すときは一旦グレースケールに変換してから、Targa形式で別名保存というフローなので、時折混入するゴミドットが気になっていたのです
と、ここまでは前置きです
ここからは、ゴミドット混入を防ぐためにPhotoshopの振る舞いについてもう少し検証を進めていきます
グレースケール化と誤差拡散
グレースケール化した際の誤差拡散の入り方について、サンプルを作って検証してみました
RGB → グレースケール
例えばこの 元の画像 512ｘ512 カラーモードは RGB
レイヤーは以下の状態
背景は 50％（128,128,128）のグレー
これを、
先に画像を統合してから、カラーモードを グレースケールに強制変更
見た目ではわからないけど、自動選択ツール(W) で調べると
誤差拡散がばっちり
テキストレイヤーを統合せずにカラーモードをグレースケールにすると、
誤差拡散は入らない
つまりはレイヤーに直接描画したり、統合したりしてラスタライズされているものは誤差拡散が適用されてしまうということになるようです
以下の特殊なレイヤーには誤差拡散が適用されないことが判明
- テキストレイヤー
- シェイプレイヤー
- グラデーションレイヤー
- ベタ塗りレイヤー
- etc.
RGB → モノクロ → グレースケール
次は事前にモノクロにしてからグレースケールにする手順を試してみます
モノクロ化する方法は３通りあります
輝度成分を元に割り当てるグラデーションマップが一番素直な印象
『白黒』は、モノクロ写真のロジックを理解せずにうかつに触るのは控えた方がいいと思うけど、初期設定で赤と緑が同じというのは意外な結果だった
色相・彩度はこれも意外な結果
調整レイヤーが用意されているので統合せずにグレースケールな見た目にすることも可能
で、
直前に上の３つの方法でグレースケールな見た目にしたあと、
カラーモードを変更すると
事前にグレースケールにしておくと誤差拡散の量が軽減されたので効果はあった
『白黒』だと誤差拡散がかからないのは発見
少々のゴミドットはもう目をつぶるしかないかもしれない
カラーのレイヤー管理を諦めて、始めからグレースケールで作業するという選択肢もあるけど、最初からグレースケールで作業すると、0～255の輝度ではなく 0～100％ のK値で扱うことになるので、微妙な諧調の絵を作りにくくなる懸念があるのが敬遠したいのも理由のひとつ
↑ 整数のみで小数点は使えない
ここで疑問なのが
なぜグレースケールにするのか
Photoshopでカラーモードをグレースケールにすると、カラー情報が破棄されているので、例えばTarga形式（*.tga）にしたときに ファイルフォーマットを 8bit で書きだすことができるし、単純にファイルサイズが 約1/4程度になるし、 エンジンに持って行ったときに、自動判別してくれて設定の手間が減ったりする
その程度なら
グレースケールにせずにエンジンに持って行ってもいいのでは？
確かに・・・
RGBの状態の画像を 24bitのTGA形式で書きだして試してみた
インポート設定で Grayscale を選択できる
赤色のレッドチャンネルのみが残されて、緑と青が無くなってしまうけど、誤差拡散が入らないのはいい
となると、モノクロ画像でインポートしても
キャプチャしてカラーを拾ってみてもまったく損失なし問題なし
なんだかちょっと拍子抜けな感じだけど
Photoshopの グレースケール化問題で悩む必要がなくなった
他のフルカラーのテクスチャとは分けた方がアセット管理的に何かと都合がよいのでファイル名にサフィックスをつけることで解決できそう
マスクにコピペすると誤差拡散が適用される
操作の途中でグレースケール化と同じような誤差拡散が適用される事例をあげておきます
レイヤーマスクを作成するときに、モノクロ状態の画像をレイヤーマスクとしてペーストすることもよくやります
↓こういった抜きのレイヤーが作れます
このペースト時にグレースケール化されて誤差拡散が適用されてしまうのです
これはレイヤーのピクセルからではなく、レッドチャンネルからコピペすることで誤差拡散を回避できます
モノクロで作業していれば、レッド以外のチャンネルでも問題は無い
グラデーションツールとグラデーションレイヤー
これはグレースケール化の操作とは関係ないところで、誤差拡散処理が入ったり入らなかったりする例です
私の認識としては
グラデーションレイヤーは後から色味や傾斜、角度などを調整できたり、さらにマスクで濃淡や範囲まで自由自在な優れもの
一方、グラデーションツールは直接ピクセルとして描いてしまうので、角度を決めるときに、それなりに緊張を伴う完全に不可逆な作画ツール
というところでした
ところが今回グレースケールテクスチャの検証で気づくことができました
今まであまり解像度の高いグラデーションは禁忌として使わない習慣があって避けていたのですが、今回思い切って大きいサイズのテクスチャでグラデを作ってみたところ
以下のような結果になりました
※400％に拡大しています
グラデーションレイヤーには誤差拡散が入らないので、解像度の高い大きな面積を塗る際には諧調の段差が見えます
レイヤーをラスタライズしてもそのままの状態でラスタライズされます
もう一方のグラデーションツールは滑らかに見えるように誤差拡散を適用した状態で描画します
この違いを頭に入れおいて損はないと思うので、いつか使い分けが必要な場面で活用したいと思います
まとめ
グレースケールテクスチャを作る場合は、
- カラーモードをRGBで作業して問題ない
- UE4にインポートする際に Grayscale にする（Rチャンネルのみが使われる）
- インポートするとレッドチャンネルのみが使われる
Photoshop上でカラーモードをグレースケールに変更した際に判明したことは
- グレースケールに変更すると誤差拡散が適用される
- 一部の特殊なレイヤーはグレースケール化した際に誤差拡散されない
- RGBからチャンネルにコピペするとグレースケール化と同様に誤差拡散が適用
ということで、謎のゴミドットに悩まされることなく、安全にグレースケールなテクスチャを作成できそうです
また一歩Photoshopに近づくことができた気がします
４K解像度が当たり前になる日もそう遠くない気もするので、効率のいいテクスチャ制作ができるように準備はしておきたいところです
カラフルな描き込みにこだわるあまり、圧縮の餌食になって画質を落とすことになるのはもったいないので、うまくグレースケールも活用しつつステキなUIデザインを実装できるようになりたいですね
ではでは
ステキなグレースケールテクスチャライフを！
