8 STEP 8 / 9

テクスチャを改変して自分だけのカラーにする

「アバターの毛並みや瞳の色を、自分の好きな色に変えてみたい!」ペイントソフトやUnityの機能を使った、初心者向けアバターカラー改変のロードマップ。

#VRC アバター 改変 テクスチャ#VRChat アバター 色変え#アバター 改変 やり方

アバターをお着替えできるようになったら、最終ステップは 「アバターのカラー改変(テクスチャ改変)」 です!

フラットくんの毛並みをピンクやブルーのオリジナルカラーに染めたり、瞳の色を自分の好みに変えたり、体にお気に入りのタトゥーやロゴマークを貼り付けたりすることで、この世界に二人といない「あなただけのオリジナルフラットくん」が誕生します。

このガイドでは、無料の高機能ペイントソフト「GIMP」を使って、初心者でも挑戦できるカスタマイズのやり方をわかりやすく案内します!

[!TIP] 著者はたまたまGIMPを使用しているため、このガイドではGIMPでの手順を説明しますが、PhotoshopやCLIP STUDIO PAINT(クリスタ)など他のペイントソフトでも基本的な流れは同じです。


Step 1. Unityのテクスチャフォルダの場所を確認する

アバターの画像ファイルを編集する準備として、まずはUnityプロジェクト内のテクスチャが保存されているフォルダをエクスプローラーで開きます。

  1. Unityでフラットくんのプロジェクトを開きます。

  2. 下部の「Project」ウィンドウで tex フォルダを開きます。

    texフォルダを開く

  3. 適当なテクスチャ(例:bodyなど)を右クリックし、「Show in Explorer」をクリックします。 Show in Explorer

  4. エクスプローラーが起動し、テクスチャファイルの保存先が表示されます。エクスプローラーのアドレスバーをクリックして、フォルダのパス(保存場所)をコピーしておきます。 パスのコピー エクスプローラーでパスをコピー


Step 2. GIMPでPSDファイルを開き、作業用ファイルとして保存する

次に、ダウンロードしたフラットくんの製品パッケージに含まれる「テクスチャPSDファイル」をGIMPで開いて準備します。

  1. フラットくんをダウンロードして解凍したフォルダを開き、その中にある 「フラットテクスチャファイル」 フォルダを開きます。 テクスチャフォルダを開く

  2. body.psd をダブルクリック、またはGIMPにドラッグ&ドロップして開きます。 GIMPでbody.psdを開く

  3. GIMPのメニューから「ファイル」>「名前を付けて保存」を選択します。 名前を付けて保存

  4. 保存ダイアログが表示されたら、名前の入力欄をクリックします。 名前欄の選択

  5. 先ほどUnityのエクスプローラーからコピーしておいたフォルダのパスをアドレス欄に貼り付けて、Enterキーを押してUnityの tex フォルダへ移動します。 パスの貼り付け

  6. ファイル名を .body.xcf に変更して保存します。 【重要】 ファイル名の頭にドット . をつけるのが非常に重要です!

    .body.xcfで保存

    [!WARNING] なぜ頭に . をつけるの? ファイル名の頭に . を付け忘れると、Unityがこの作業ファイルを通常のテクスチャとして読み込んでしまい、プロジェクトの動作が非常に重くなったり、同じテクスチャが2つ存在するように見えたりと、様々なトラブルの原因になります。必ず「.body.xcf」のようにドットから始まるファイル名で保存してください。

  7. 同様にして、bodyE.psd、karada.psd、mofu.psd もそれぞれ開いて、Unityの tex フォルダ内に .bodyE.xcf、.karada.xcf、.mofu.xcf という名前で保存します。 (※無印「フラット」以外のアバターバージョンでは cloth.psd など衣装のPSDもあるため、それらも同様に作業用 .xcf ファイルとして保存しておきます)

    他のファイルも保存


Step 3. GIMPで顔や体のお好みの色を変更する

準備が完了したら、実際に色を変更していきます。ここでは例として、フラットくんの顔(Body)の基本的な色(ベージュ部分)を変える方法を解説します。

  1. 先ほどUnityの tex フォルダに保存した .body.xcf をGIMPで開きます。
  2. 画面右下の「レイヤー」タブから、ベージュ色で塗られている 「メイン」 というレイヤーをクリックして選択します。 メインレイヤーを選択 レイヤーの拡大

色の変え方には、仕上がりを見ながら調整する 「感覚派向けの方法」 と、最初からカラーコードを指定してきれいに塗る 「理論派向けの方法」 の2種類があります。好みに合わせて選んでみてください!

パターンA:直感的に色を決める「感覚派向けの方法」

画面を見ながらスライダーをいじって、お気に入りの色を探したい方におすすめの手順です。

  1. GIMPの上部メニューから、「色」>「色相・彩度」を選択します。 色相・彩度を選択

  2. 表示された設定ダイアログで「色相」「輝度」「彩度」のバーを左右に動かし、プレビューを見ながら好きな色に調整して「OK」をクリックします。 色を調整

パターンB:カラーコードできっちり決める「理論派向けの方法」

あらかじめ使いたいカラーコードが決まっていて、単色できれいに塗りつぶしたい場合におすすめの手順です。

  1. レイヤー一覧にある「メイン」を右クリックし、「レイヤーマスクの追加」をクリックします。 レイヤーマスクの追加

  2. オプション画面で「レイヤーのアルファチャンネルを移転」を選択し、「追加」ボタンを押します。 アルファチャンネルを移転

  3. 「メイン」レイヤーのサムネイルの右側に、白黒のマスク画像が追加されたことを確認します。 マスク追加の確認

  4. カラーパレットから変更したい色(メインに塗りたいお好みの色)を選択します。 カラーパレット選択

  5. 「メイン」レイヤーのベージュ色のサムネイルの側(追加したマスクではなく、元の画像サムネイル)をクリックして選択します。 元のサムネイルを選択

  6. キーボードの Ctrl + . (描画色での塗りつぶしショートカットキー)を押します。レイヤーが指定した色で綺麗に塗りつぶされます。 塗りつぶし実行


Step 4. 画像をエクスポートしてUnityに適用する

色を変更できたら、Unityがテクスチャとして読み込める画像形式(PNG)でエクスポート(書き出し)します。

  1. キーボードの Ctrl + E を押して、エクスポート画面を開きます。 エクスポート画面を開く

  2. ファイル名の先頭にあるドットを削除して、body.png に変更します。 (※または、画面の下部リストにある既存の body.png をダブルクリックして選択しても構いません)

  3. 「エクスポート」をクリックすると上書き保存の警告画面が出るので、「置き換え」をクリックします。 置き換えを選択

  4. ワンテンポ遅れて「画像をPNGでエクスポート」という設定ウィンドウがポップアップします。(※非常に見落としやすいので注意!) この画面で「エクスポート」ボタンを押します。 エクスポート設定ウィンドウ

    [!TIP] このとき、Compression level (圧縮レベル)を 0 に設定しておくのがおすすめです。圧縮に時間がかからなくなるため、保存や書き出しが非常にスムーズになります。 (※圧縮レベルを0にするとファイルの容量は大きくなりますが、VRChatにアバターをアップロードする際にUnity側で自動的に圧縮されるため、他プレイヤーへの影響は心配ありません)

  5. エクスポートした直後の状態では、まだUnity上のフラットくんの見た目は変わっていません。 Unityの画面(未更新)

  6. Unityの画面をクリックしてアクティブ(操作可能状態)にすると、自動的に画像データの再読み込みが走り、フラットくんの色が先ほど変更したお好みの色に変わります! Unityの画面(更新後)

  7. 一度エクスポートしたら、以降はCtrl+Eを押すだけで一発でエクスポートできるようになります。


Step 5. 保存とその他のポイント

作業ファイルのこまめな保存

エクスポートしただけでは、GIMPのレイヤー情報などが保存されません。作業を途中でやめたり、後から調整できるようにするために、GIMP側でもこまめに Ctrl + S を押して保存(XCFファイルとしての保存)を忘れないようにしましょう!

Ctrl+Sで作業保存

瞳や目を光らせたい場合

目をはじめとする一部のパーツの色を綺麗に変えるには、body と bodyE の両方の色を変更する必要があります。

  • body: 通常の明るさで表示される色(テクスチャのベース)
  • bodyE: 暗闇で光る発光(Emission)用の色 この2つの色が混ざり合って画面に描画されるため、両方を同じように調整すると自然で綺麗な仕上がりになります。

エクスポート中の真っ白・真っピンク画面に注意

画像をエクスポートし始めた瞬間、または書き出し処理の最中に大急ぎでUnityの画面に切り替えると、画像の書き込みが完了していないため、Unity上でアバターが真っ白やピンク色のエラーテクスチャになってしまうことがあります。

エラーの真っ白画面

この状態になっても慌てる必要はありません。画像の書き出しが終わるのを確認してから、一度他のフォルダを選択するなどして、再度Unityの画面をアクティブにすれば正常に読み込まれます。


これで自分だけのカラー改変手順は完了です。 アバターの毛並みの色を大きく変える以外にも、模様を描き加えたり、服の色を変えてみる、模様をがらっと変更してみるなど、自由にアバターを彩ってみてください!

次のステップへ:アバターをクロスプラットフォーム(Quest・スマホ)に対応させる