テクスチャー編集をUnity1つで!?色改変するなら手離せないツール TexTransTool使い方ガイド

アバター改変において避けて通れない工程の一つが、テクスチャーの改変です。髪や目、衣装など、アバターの一部の色を変更するために、画像編集ソフトを起動することもあるでしょう。

アバターの色は、アイデンティティに関わり、コーデにおいても重要なポイントです。

アバター改変のたびに毎度行われる作業ではありますが、手間がかかり、変更によって元のマテリアル設定が崩れてしまうこともあります。そのような状況を解決するツールが「TexTransTool」です。

本記事では、状況に応じたTexTransToolの使い方を解説します。

前提確認
  • 本記事では、シェーダーとしてlilToonを使用していることを前提とします。
  • lilToon、TexTransTool本体、および使用するアバターやテクスチャ素材がUnityプロジェクトにインポート済みであるものとして進めます。導入がお済みでない方は、事前に準備をお願いします。
  • 今回紹介する機能の中には、実験的な機能も含まれています。今後のアップデートによって使えなくなるなどの変更が加えられる可能性があります

TexTransToolとは?

TexTransToolとは、Reina_Sakiriaさんが作成したUnityEditor拡張です。非破壊(元のデータを変更しない)でのテクスチャー編集に特化しており、従来 GIMP や Photoshop などの画像編集ソフトで行っていた作業をUnity上で完結させることができます。

今回紹介する主な機能
  • テクスチャのブレンド・差し替え: マテリアル設定を壊さずにテクスチャを合成・変更できます。
  • デカールの追加: UVマップを意識せずに、好きな位置にテクスチャ(デカール)を貼り付けられます。
  • グラデーションの追加: 髪などに簡単にグラデーションを追加できます。
  • アトラス化: 複数のテクスチャを1枚にまとめ、パフォーマンスを向上させます。
  • PSDファイルの活用: レイヤー構造を持つPSDファイルをUnity上で扱い、色改変などを行えます。

より詳細について知りたい人はこちら

瞳や肌テクスチャーを簡単差し替え!「TextureBlender」

「TextureBlender」は、基準となるテクスチャーと差し替えたいテクスチャーを、マテリアルの構造を維持したままブレンド(合成)できる機能です。ここでは瞳テクスチャーの差し替えを例に説明します。

これを使い実際に瞳テクスチャーを差し替える方法を説明します。

Hierarchyでアバターのルートオブジェクトを右クリックし、「TexTransTool」 >「 TTT TextureBlender」を選択します。アバターオブジェクト直下に「 TextureBlender 」が追加されます。

アバターにTextureBlenderが追加されました。追加された TextureBlender をクリックし、Inspectorで設定を行います。

選択したテクスチャーに、差し替えの基準となるテクスチャー(例: 元の顔テクスチャ)を設定します。

今回は選択テクスチャーに顔のテクスチャーを割り当てるのですが、いちいち探すのはめんどくさいですよね?「セレクターを開く」ボタンをクリックすると 「DomainTextureSelector 」が開きます。アバターに使用されているテクスチャーが一覧表示されるので、ここから選択すると簡単です。

選択すると、シーンビューで該当箇所が一時的に白く表示されることがありますが、これは正常な状態です。差し替えたい新しいテクスチャー(例: 新しい瞳テクスチャ)をブレンドテクスチャーに設定します。今回は例として、nanaporiumの「Opalescent Tears Eye」を使用します。

正しく設定できれば、シーンビューのアバターに新しい瞳テクスチャが適用された状態で表示されます。これで差し替えは完了です。

補足:TextureBlenderはあくまでも「基本となる画像に別の画像を載せるだけ」の機能です。そのため、マテリアル内にあるNormalMapやエミッション用のMaskテクスチャの差し替えはこの機能ではできません。テクスチャの差し替えなどが必要な場合は、マテリアルを直接変更、複製するなどの従来の作業になります。

UVに縛られないデカールの追加!「SimpleDecal」

アバターにタトゥーや模様などのワンポイント(デカール)を追加したい場合、通常はUVマップを考慮して画像編集ソフトで調整する必要があります。「SimpleDecal 」機能を使えば、Unity上で直感的にデカールを追加できます。

UVマップは、3Dモデルの表面を平面に展開した図のようなものです。この展開図のどの部分にテクスチャ画像のどの部分を貼り付けるか、という対応情報(座標)を指定するために使われます。「U座標」「V座標」という名前からUVマップと呼ばれています。

では実際に追加していきます。

アバターのルートオブジェクトを右クリックし、「TexTransTool 」>「 TTT SimpleDecal 」を選択します。

追加された SimpleDecal をクリックし、Inspectorで設定します。今回は頬にスペードマークを追加する例で進めます。

デカールテクスチャーに貼り付けたい画像(今回はスペードマーク)を設定します。

シーンビューで「 SimpleDecal 」のオブジェクト自体を移動・回転させて、デカールを貼りたい位置に合わせます。いわば、小物アクセサリーを取り付ける感覚です。

画像の大きさは、Inspector内の 「TTT SimpleDecal 」> 「スケール設定 」で調整します。

顔の方は悪くないですが、このままだと髪型にもデカールの一部が貼り付いてしまいます。

これを防ぐために、デカールを適用するマテリアルを指定してフィルタリングを行います。

Inspectorの「 TTT SimpleDecal 」>「 レンダラー設定 」にある レンダラー選択モード を マテリアルでフィルタリング に変更します。

アバターのマテリアル一覧が表示されるので、デカールを適用したいマテリアル(例: 顔のマテリアル Shinano_face)にチェックを入れます。

シーンビューで確認し、意図しない部分のデカールが消えていれば設定完了です。

髪色グラデーションも楽々追加!「SingleGradationDecal」

人気の髪色改変の中に、髪型にグラデーションを追加するようなものがあります。ですが、実際やるとなると、グラデーション用の画像を別途用意しなければなりません。そこで、TexTransToolにはグラデーションを簡単に実装することができる機能が提供されています。それが「SingleGradationDecal」です。

追加するためには、アバターのルートオブジェクトを右クリックし、「TexTransTool 」> 「TTT SingleGradationDecal 」を選択します。

まず、グラデーションを適用したい箇所(今回は髪)を指定しましょう。

SingleGradationDecal のInspectorを開き、レンダラー設定 > マテリアルでフィルタリング を選択し、髪のマテリアル(例: Shinano_hair)にチェックを入れます。

ですが、今回のしなののような髪のマテリアルが尻尾などの他の部位と共用されている場合、その部位にも影響が出てしまいます。そのこともあり、髪の末端と尻尾が白くなっています。

特定の部位だけに適用したい場合は、「アイランドセレクター」を使って範囲をより詳細に指定します。

アバターのルートを右クリックし、TexTransTool > IslandSelector から、範囲指定に適した形状のセレクターを選択します。機能はさまざまありますが、今回は球状範囲で指定できる 「TTT SphereIslandSelector 」を使用します。

追加した「 SphereIslandSelector 」を、「SingleGradationDecal 」のInspector内にある 「デカール設定 」>「 アイランドセレクター 」の欄にドラッグ&ドロップします。

シーンビューで「 SphereIslandSelector 」の位置やスケールを調整し、グラデーションを適用したい範囲を決定します。

今回は髪全体を覆うように調整しました。同系統の白で分かりづらいですが、髪の末端が白のベタ塗りになっているのが分かるでしょうか?

あとはお楽しみ、グラデーションの色を決めます。

「SingleGradationDecal 」のInspectorに戻り、グラデーションの設定を行います。

確認する項目は2つ。

  • グラデーション: クリックしてグラデーション編集ウィンドウを開き、好みの色や透明度を設定します。
  • ブレンドタイプキー: 色の合成方法を選択します。(例: 通常、乗算、焼き込みカラーなど)

調整結果はシーンビューでリアルタイムに確認できます。分からない場合は、一旦手探りで設定しつつ、目指しているものに向けて設定しましょう。

今回は画像のような感じにしました。ブレンドタイプキーには焼き込みカラーを使用。なかなか素敵ではないでしょうか。