リカラーしようぜ！シムズ４でリカラーCCを作る（CASリカラー編）

このページでは、基本的なリカラーの方法を、シムの服やアクセサリーと言ったCAS（Create a Sim）パーツを例にご紹介します。オブジェクトも概ねのリカラー方法は同じです。このブログでオブジェクトのリカラーも紹介しておりますが、そちらの記事がほぼBlenderのテクスチャペイントという３Dペイント機能の紹介になっております。使い慣れたペイントソフトのみでリカラーされる場合、こちらに書いた手順を見ていただいたほうがいいかもしれません。

作成手順

STEP 1　リカラーしたい服を選びます。

準備編で必要なツールを揃えたら、さっそくSims 4 Studio(以下S4S)を起動します。

起動後のメニュー画面がこちらです。（画像はクリックで拡大表示されます。）
言語設定が英語のままになってますが（面倒くさがって設定弄っていないだけで、ちゃんとSettingsから日本語メニューにできます）…各メニューの場所は一緒なのでだいたい分かるかと思います。
「Create CAS Standalone」にチェックを入れて、CASボタンをクリックします。

CASパーツ（シムが身に着けるもの、メイクやソバカスなんかも含みます）の一覧が出ます。
とりあえずここではTシャツを選んでみました。
白いカラーがあればそれを選択するとリカラーしやすいです。

白いカラーを選んだのは、もともとテクスチャに描かれている服の皺の描写をリカラーにも残すためです。
ここでは弄りませんが、シムの服などにはノーマルマップと呼ばれる、凸凹を表現するための画像があります。
リカラー、つまりメッシュを編集しないでCCを作る場合、こちらのノーマルマップは基本的に弄りません。
いや、弄ってもいいんですがちょっとややこしくなるので、ここでは弄りません。
このノーマルマップで表現される凸凹は服の皺にも影響します。EA公式の服を見てみると、服の皺はノーマルマップの皺の位置とほぼ同様に描きこまれています。そこで、リカラー品も、ノーマルマップとディフューズマップ（今からリカラーするテクスチャーです）に描かれた皺があまりずれてしまわないよう、元々のテクスチャに描かれたそれを利用しよう、という訳です。
では、白いプレーンなカラーが無い服は？…そうなんですよね。困ってしまいます。ちょっと後の機会に検証して記事にしてみます。

リカラーしたい服を選んだら、右下のNextボタンを押します。
.packageファイルを保存する画面が出ますので、任意の場所にファイル名をつけて保存します。

STEP 2　リカラーテクスチャーの作成

ファイルを保存後、このような画面が表示されます。ちょっと濃い目のスキンヘッドが虚空を凝視してるモデルが表示されてるかと思います。この画面で編集したテクスチャをプレビューできます。

左側のプレビューはマウスを右ボタンでドラッグしたりスクロールホイールでズームしたり色々カメラを動かせます。
右側のメニュー郡の中から、「Texture」の枠内、「Diffuse」を選択して、「Export」ボタンをクリックします。
ファイルの保存画面がでますので、ここではファイルフォーマットにpngを選択して、任意の名前を付けて保存します。

保存したpngをフォトショップで開いた画像です。
背景のチェッカーパターンは画像の透過部分です。

この画像の上にリカラーする画像を乗っけていきます。
こんな感じになりました。（画像クリックで拡大します。）

フォトショップで編集しましたが、他のソフトでも概ね同じような編集は可能だと思います。

補足しますと、まず元の画像は白いシャツを選んだのですが、僅かに色味があるので、彩度の調整で大きく彩度を下げ完全に白黒の階調になるようにしています。

エクポートにpngを選択しましたので、概ねのソフトで透過部分を確認しながら編集ができるはずです。
透過部分には新たに何かを描いてしまわないようにします。はみ出して描いた場合、シムの意図しない所にはみ出た画像が描かれてしまったりする原因になります。
フォトショップではクリッピングマスクを利用し、簡単に上に乗せる画像が元の画像の透過部分で切り抜かれたようにする事ができます。実際には切り抜かれてはいないのでレイヤー内の画像の再編集も可能で、とても便利な機能です。
こうする事で、最後に画像を纏める時に透過部分を保護する事ができます。
（クリッピングマスク使用方法：https://helpx.adobe.com/jp/photoshop/kb/4995.html）

フォトショップの他に、似たような機能をもつペイントソフトがあるか調べてみました。（無料または比較的安価なソフトをいくつか）

Krita（https://krita.org/jp/）
アルファを継承という機能があって、フォトショのクリッピングマスクと同じような事が可能です。
レイヤーの右側にある「α」のアイコンをクリックして有効にすると下にあるレイヤーの透過部分でレイヤーがクリッピングされます。
CLIP STUDIO PAINT（https://www.clip-studio.com/clip_site/）
まんま下のレイヤーでクリッピングという機能があります。
（レイヤー周りの操作：https://howto.clip-studio.com/library/page/view/clipstudiopaint_tora_001_026）
SAI（https://www.systemax.jp/ja/sai/）
同じく、下のレイヤーでクリッピング機能がありました。
（こちらのブログで詳しく説明して下さってました：http://nako-itnote.com/sai-clipping-how-to-use/）
GIMP（https://www.gimp.org/）
残念ながら、調べても該当する機能が見つかりませんでした。
GIMPでの編集はレイヤーごとに元画像の透過部分からマスクをつくるなりして作業する、といった感じになるのかな？と思います。もしかしたら方法があるのかもしれませんが…

また、リカラー用の画像は乗算で重ねています。
これは前述したように元画像の服の皺を利用するためです。元のTシャツの画像はグレーの階調になってますので、リカラー用のカラー画像を乗算で重ねるとグレーの階調に各ピクセルのRGBの値が乗算されるので、皺のディティールを保ったまま自然にカラー画像を見せる事ができます。
その他、オーバーレイ、ソフトライト等違ったブレンドの方法が用意されていると思いますので、色々試してみるのも面白いと思います。
これも上記のペイントソフトにも備わっている機能です。

リカラー用の編集が終わりましたら、各レイヤーを結合して1枚にします。

フォトショップの場合、「画像を結合」ではなく、「表示レイヤーを結合」で結合してください。
透過部分はそのままに1枚にまとめます。
pngで保存します。

STEP3　S4Sにインポートします

再びS4Sに戻って、「Texture」のところ、「Diffuse」を選択して「Import」をクリックします。
ファイルの読み込み画面が開きますので、先ほど編集したpngファイルを選択します。

インポートされると、プレビューにリカラーが反映されていると思います。
「Swatch Tumbnail」の所、お好きなカラーに変更してメニューで表示されるサムネールのカラーを変更する事ができます。
また、追加で色違いなんかを用意した場合は、スウォッチの横「Add Swatch」でバリエーションを追加することができます。
右下のSaveボタンを押して、保存します。

保存した.packageファイルをModsフォルダーに入れて確認します。

ファイルを入れたら、シムズ４を起動します。

CCがちゃんと反映されてるのが確認できました！ゲームオプションで「カスタムコンテンツを有効」にチェックを入れるのをお忘れなく。
駆け足な説明でしたが、オリジナルのリカラーCCの完成です。お疲れ様でした！

テクスチャの話し　PNGとDDS

さて、ここからは直接リカラーの手順とは関係ない話ですが…

この手順では画像のフォーマットにpngを使用しました。
ですが、実際にはゲームの中では作ったpngがそのまま使用されるわけではありません。一般的にゲームなんかでよく使われる画像形式にDDSがあります。シムズも例に漏れずDDSが使用されているようです。

シムズではDDSは（例外もありますが）DXT5というフォーマットで使用されているようです。
これはDXTCという画像圧縮アルゴリズムを用いて画像が圧縮されます。jpegなんかにすると画像がなんか汚くなるな～といった事と同じように、DXTCでの圧縮もやはり画像は劣化します。とほほ。

S4Sではpngで画像をインポートした際にこの圧縮をツール側で行ってるようです。
この圧縮なんですが、ツールによって多少の差があったりします。実際にS4Sと予めDDSで保存した物を比べてみました。（クリックで拡大します。）

S4Sは一度インポートした画像をエクスポートしました。すでに圧縮済みの画像がエクスポートされるので吐き出す形式はpngでもDDSでも同じになります。
他２つはそれぞれNvidiaのフォトショッププラグイン、Paint.netでDDS形式（DXT5）で保存したものです。

輪郭の外側あたりに、ちょっと違いが見られるでしょうか？
どれがいいか、というのはどの部分で劣化を抑えたいか、によると思うのでケースバイケースかもしれません。
（実は、サンプルに使った画像のような輪郭線があるイラストのような物はDXTCでの圧縮には向いてない絵だったりします…　DXTCの圧縮アルゴリズムがはっきりと色の違う面をくっきりした線で区切ってるような箇所を上手く圧縮できないので、輪郭線あたりガビガビとにじんだようになりがちです。）

もし、S4Sでは無く予め圧縮したい場合はDDSで保存します。

フォトショップの場合、ファイル保存時にDDSフォーマットを選択すると以下のような画面が出ますので、DXT5を選択、Generate MIP mapsにチェックを入れて保存します。

Paint.netの場合、pngファイルを開いたら、DXT5に設定して、ミップマップの生成にチェックを入れてOKをクリックします。

透過付きpngからDXT5で保存した場合、透過部分はアルファチャンネルとして保存されます。

圧縮による画像の劣化は拘りだすとキリがないので、ここではこれ以上触れませんが、リカラーがゲームに表示してみたらなんか汚くなってる…なんて時はこのことをちょっと思い出して頂けたら幸いです。