Unity上でPSDを使った色改変！？「TexTransTool PSD Importer」と「MultiLayerImageCanvas」
TexTransToolは、レイヤー構造を持つPSDファイルをUnity上で再現し、細かい色改変などを可能にする機能も備えています。「 TexTransTool PSD Importer 」と 「 MultiLayerImageCanvas 」を使用します。今回はその一例として、顔のPSDファイルを読み込み、ちょっとした色改変をしていきます。
注意：この機能は執筆時点で実験的な機能です。お試し版に近い形のため、将来的に変更が加わったり、動作が不安定になる場合があります。
Adobe Photoshopで標準的に使用される画像ファイル形式です。PNGなどの画像と異なり、「レイヤー」と呼ばれる階層構造や編集情報を保持できるため、アバターや衣装のテクスチャ改変用に配布されることも多い形式です。
レイヤーに分かれていることによって、特定部分のみの色を変えるといった作業が行いやすくなります。
通常、PSDファイルを開いて編集するにはPhotoshopや互換性のある画像編集ソフト（GIMP, Clip Studio Paintなど）が必要ですが、TexTransToolを使えばUnity上で扱えるようになります。（※互換ソフトではPhotoshopでの表示と完全には一致しない場合があります）
改変に使用したいPSDファイルを、UnityプロジェクトのAssetsフォルダ内の分かりやすい場所にドラッグ＆ドロップなどでインポートします。
インポートしたPSDファイルを選択し、Inspector上部にある Importer のメニューをクリックし、「 net.rs64.TexTransTool.MultiLayerImage.Importer.TexTransToolPSDImporter 」を選択します。
適用後は、PSDファイルのアイコンがPrefabのアイコンに変わります。
変換されたPSDプレハブを、Hierarchyのアバターのルートオブジェクト配下にドラッグ＆ドロップします。プレハブを配置すると、PSDファイルのレイヤー構造がHierarchy上に再現されていることが確認できます。
追加したPrefab状態であるPSDのオブジェクトを選択し、Inspectorを開きます。
「セレクターを開く」で開き、このPSDで編集したいアバター側の元のテクスチャー（例: 顔テクスチャ）を選択テクスチャーに設定します。
次にこのPSDPrefabのルートをクリックし、設定を開きます。
セレクターを開き、アバター側の顔テクスチャーを選択テクスチャーにいれると、リアルタイムプレビューの様子が変わりました。私の画面は顔面真っ暗ですね。ちょっとこわい。
設定後、プレビュー画面でアバターの顔などが真っ暗になったり、意図しない表示になることがあります。これは、PSDファイル内のマスクレイヤーなどがデフォルトで有効になっている場合があるためです。
「 MultiLayerImageCanvas 」では、Hierarchy上のオブジェクトの有効/無効状態が、そのままPSDレイヤーの表示/非表示に対応します。意図しない表示になっている原因のレイヤー（例: Mask レイヤーオブジェクト）をHierarchy上で選択し、Inspector左上のチェックボックスを外して非表示にします。プレビューを確認し、正しく表示されるように調整しましょう。
お顔がしっかり見えましたね。
あとは目的に合わせて基本的な画像編集ソフトと同様に、フィルターや調整レイヤーを追加して、色改変などを行います。
一例として、今回はまつ毛にグラデーションマップを当てて少し赤みがかった色にしていきます。
PSDPrefabのオブジェクトを右クリックし、「TexTransTool 」>「 MultiLayerImage」から適用したいフィルターやレイヤーの種類を選択します。今回は「 TTT UnityGradationMapLayer 」を選択。
追加された UnityGradationMapLayer オブジェクトを、Hierarchy上で編集対象のレイヤー（今回だとまつ毛部分のEye lash）の直下に移動させます。
すると今度は顔が真っ白になりました。
これはEye lash以下のすべてのレイヤーに対してUnityGradationMapLayerの効果が反映されていることを表します。
このままだと良くないので、「Clipping」のチェックボックスにチェックを入れます。これで1つ下のまつ毛だけに「 UnityGradationMapLayer 」が適用されました。
後は、「 UnityGradationMapLayer 」のInspectorでグラデーションを編集し、好みの色合いに調整します。
TextureBlender など他のTexTransTool機能と併用する場合、Hierarchy上でのオブジェクトの順序が最終的な見た目に影響します。
今回の場合だと、最初に「 TextureBlender 」で瞳を差し替えて「MultiLayerImageCanvas 」 で顔全体の色を調整しました。このときPSDPrefabが TextureBlender よりもHierarchy内で下にあると、瞳の変更が上書きされてしまいます。
そのため先ほど出した画像も、目元を赤くしたのにも関わらずデフォルトのカラーに戻っています。
意図した通りの重ね順になるように、Hierarchy上でPSDプレハブや TextureBlender などのオブジェクトの順番を調整してください。分かりにくいと思った場合は、ひとまずオブジェクトを動かしてみて調整しましょう。Ctrl+Zキーで巻き戻せるため、間違えても大丈夫です。
今回は、差し替えた瞳が見えるように、PSDプレハブを TextureBlender よりも上に配置します。
目も赤くなり、髪と目元を合わせて統一感のあるカラーリングになったのが分かるでしょう。
テクスチャーメモリーのムダを簡単削減！「AtlasTexture」
複数の衣装やアクセサリーを組み合わせると、使用しているテクスチャの枚数が増え、アバターのパフォーマンス（特にテクスチャーメモリ使用量）に影響が出ることがあります。
そこで使う「 AtlasTexture 」は、複数のテクスチャを1枚の画像（アトラス画像）にまとめる「アトラス化」を行い、この問題を軽減する機能です。元のテクスチャファイルを変更することなく実行できます。
今回は、『Natelier -ﾅﾄﾘｴ-』から販売されている『ポロワンピース』に、どうしてもデフォルト衣装のタイツも一緒に使いたいというシチュエーションのもと、テクスチャーのアトラス化をしていきます。
複数の画像を、タイル状に並べて1枚の大きな画像にまとめる処理のことです。これにより、GPUが読み込むテクスチャの枚数を減らし、描画負荷の軽減やメモリ使用量の削減につながります。まとめられた画像を「テクスチャアトラス」や「アトラス画像」と呼びます。
アバターのルートオブジェクトを右クリックし、「 TexTransTool 」>「 TTT AtlasTexture」を選択します。
追加された「 AtlasTexture 」を選択し、Inspectorを開きます。アバターが使用しているマテリアルの一覧が表示されます。
アトラス化に含めたいテクスチャが使用されているマテリアルに、チェックを入れます。今回は、デフォルト衣装のタイツと、新たに着せたワンピースのマテリアルを選択。選択されたマテリアルは「選択済みマテリアル」のリストに表示されます。
基本的な設定はこれだけです。Unityの再生ボタンを押して実行すると、アトラス化の処理を確認できます。ビルド時に表示されるNDMFのコンソールログで、アトラス化の結果や詳細を確認できます。ここで表示がおかしくないか確認しましょう。
アトラス化されたマテリアルに設定されているテクスチャを確認すると、1枚にまとめられていることがわかります。
TexTransToolの主要な機能について、具体的な使い方を交えながら解説しました。
TexTransToolを活用することで、これまで外部ツールが必要だったテクスチャ編集作業の多くをUnity上で、しかも非破壊で行うことができます。
今回紹介しきれなかった機能やレイヤーオブジェクトも多数存在します。また、実験的な機能も含まれるため、常に最新の情報を得るためにも、ぜひ公式ドキュメントも合わせてご確認ください。
この記事が、皆様の快適なアバター改変ライフの一助となれば幸いです。
