【Cities:Skylines】Blenderで自作アセット！ イルミネーション・ノーマルマップ書き出し編

はじめに
前回に引き続き、イルミネーションとノーマルマップの書き出しについてまとめていきます。前回の手順でスペキュラマップのベイクまでできれば、イルミネーションとノーマルマップもその応用なので、すんなり使いこなせるはずです。

1．イルミネーションマップの書き出し

 ・スペキュラのベイクの手順同様、ディフューズマップまで完成したモデルを用意し、光らせたい部分を３Dエディタで選択してマテリアルを設定する。あるいは光らせたい既存のマテリアルを設定する。

・マテリアルのシェーディングの「放射」の数値を１にする。
 

・プロパティウィンドウのレンダー下部のベイクのベイクモードを「放射」に設定し、ベイク。マテリアルで放射を設定したマテリアルがベイクされる。  

イルミネーションの手順は以上。特に問題なく出来るはずだ。

2015/10/25追記
After Darkアップデートに伴うイルミネーションマップ仕様変更により、照明効果を与えたい箇所ごとに白黒の強度を細かく設定する作業が必要になった。主にはGIMPやフォトショップなどの画像編集ソフトでの作業になると思うが、その作業を簡略化するためのBlender上での作業を簡単に説明する。

A.看板のロゴなど、ディフューズ色で光らせたい箇所は 「放射」の数値を0.5に設定しておく
B.窓ガラスや自動ドアなど開口部分は用途に応じて設定（ディフューズ色で光らせたい場合はAの手順と同じ、クリーム色の照明でランダムに光らせたい場合は1で設定）
C.イルミネーションマップを書き出したら画像編集ソフトで開き、A.の手順で設定した箇所をGIMPならファジー選択（魔法の杖ツール）、フォトショなら自動選択ツールで選択して選択箇所に白黒強度120の色を設定する。Bの手順で設定した箇所は用途により一括で128-255のどれかの色を設定するか、それぞれの箇所ごと128-255のどれかの色を設定する。


 2．ノーマルマップの効果
・ノーマルマップのC:S上での効果を解説する。前の記事でも解説したが、ノーマルマップで面の凸凹を表現する事ができる。

以下はノーマルマップなし、ノーマルマップの強度：普通、ノーマルマップの強度：高の効果をC:S上で実際に検証した画像だ。

ノーマルマップなし

 ノーマルマップ強度：普通（Blenderでのノーマル値は３）

ノーマルマップ強度：強（Blenderでのノーマル値は６）

 

 ノーマルマップなし

  
ノーマルマップ強度：普通（Blenderでのノーマル値は2）

 ノーマルマップ強度：強（Blenderでのノーマル値は６）

以上のように、ノーマルマップを適用すると平らな面でもノーマルマップの情報から法線を判断してハイライトと陰になる部分を描写することで溝や窪みなどの凹凸が表現される。Blenderでのノーマルの値を大きくすることで凹凸感も際立つ。ノーマルの値をむやみに大きくすると違和感が出てくるので、そのへんのさじ加減は必要だ。ただ、C:Sはバニラだと上から眺める視点が多いので気持ち強めにノーマルを設定してあげたほうが映える。

３．ノーマルマップの書き出し

 ・ノーマルマップの書き出し手順を解説する。 前の記事のスペキュラマップでのスペキュラ情報を持つテクスチャを設定する場合と同様に、すでにディフューズテクスチャとUVが設定された、ノーマルを書き出したいマテリアルをプロパティウィンドウのマテリアルで選択し、プロパティウィンドウのテクスチャの項目から空いているスロットにテクスチャを追加し、バンプテクスチャ（白黒画像で凹凸情報が含まれる）を読み込む。

・下部の「影響」の「ディフューズ」の「カラー」のチェックをはずしジオメトリの「ノーマル」にチェックをして数値を設定する。プレビューで「マテリアル」を選択すると大体の質感がわかるのでそちらを参考にノーマルの数値を設定する。

・一番下の空間という項目を「テクスチャスペース」に設定するのをお忘れなく。

・あとはプロパティウィンドウのレンダーのベイクのベイクモードをノーマルにしてベイク。成功すれば立体感のある模様のついた青の画像が出力される。こちらもUVエディタで「画像」から「画像を別名保存」で保存するのをお忘れなく。

ノーマルの解説が駆け足になってしまったので分かりにくい箇所もあるため、追々修正や補足をします。ひとまず力尽きたのでここまで。おかしな箇所やわかりづらい箇所があればお知らせください。

【Cities:Skylines】Blenderで自作アセット！ テクスチャ解説＆スペキュラマップ書き出し編

はじめに

 C:Sでは自作アセットモデル（FBXファイル）を読み込む際にいくつかのテクスチャを適用できます。それらのテクスチャはC:S上でガラス面の反射を表現したり、壁面の目地の窪みや凹凸を表現したり、看板のロゴをモデリングなしにテクスチャ設定のみで切り抜いて表現したり、看板を発光して見えるようにしたり、特定の面だけカラーバリエションを持たせたりすることができます。
前の記事で作ったような、ディフューズマップ（基本のテクスチャ）だけでも十分ですが、他のテクスチャも適用すると見た目が格段に良くなります。ディフューズマップをもとにフォトショやGIMPなどの画像編集ソフトでスペキュラ（反射）のマップやイルミネーション（照明）のマップを作る方法もありますが、テクスチャベイクを使えば簡単にスペキュラ、イルミネーション、ノーマル（凹凸を表現）のテクスチャを出力することができます。特にノーマルマップは画像編集ソフトで作成するのは難しいので、ベイクだからこそ表現できるテクスチャと言えます。今回はそんな質感用テクスチャベイクの中でスペキュラマップの作成手順をまとめました。

１．テクスチャの種類を紹介

以下、蛇足だけどC:Sのアセットモデルに適用できるテクスチャを紹介。（一部しまむらのモデルに使用したテクスチャを例に挙げる）

 モデルの読み込み方法などはWikiに解説があるのでそちらを参考にしてね。

・ディフューズ マップ（FBXファイルと同じファイル名_d.拡張子）

　→モデルの色や見た目を表現する基本のテクスチャ。一番重要。

 

・ノーマルマップ（FBXファイルと同じファイル名_n.拡張子）

　→面の凸凹を設定する。ローポリでも凹凸面や溝・目地などを表現することができる。

 

・スペキュラマップ （FBXファイルと同じファイル名_s.拡張子）

　→グレースケール画像で面の反射・光沢を設定できる。真っ白に設定すると鏡面になる。光沢もこのマップで表現でき、下の画像では屋根や壁面の光沢を表現するためわずかに濃淡が設定されている。

・イルミネーションマップ （FBXファイルと同じファイル名_i.拡張子）

　→グレースケール画像で面の照明効果を設定できる。照明の色はディフューズマップの色に依存する。看板などの照明を表現する時に。白黒の濃淡と照明効果の違いはそれほどないようだ。（要検証）
2015/10/25追記
After Darkアップデートに伴い、ゲーム中に夜間の表現が追加され、それに伴いイルミネーションマップの仕様が変更となった。
イルミネーションマップ画像の0-256の白黒の強度で照明効果無し、ディフーズ色での照明、ランダム照明などの効果が設定できる。画像の白黒の数値を設定するのはBlenderでは難しいので、GIMPやフォトショップ等の画像編集ソフトで設定してあげるのがいいようだ。白黒の数値による効果の違いが下記のものだ。

0 = 照明効果なし

1-120 =ディフューズ色での照明、120が最大発光

（使用しているディフューズ色によっては120でも照明効果が分かりにくいこともある）

128-255 ＝この範囲内で設定された箇所はランダムで照明（照明はクリーム色で発光する）

192＝照明効果なし

参考
英語版 Cityes:skylineswiki
Illumination Map Value Overview
Cities: Skylines Mod製作所 part 2

After Darkアップデート前のイルミネーションテクスチャ

After Darkアップデート後のイルミネーションテクスチャ
（照明効果部分はすべて強度120）

アルファマップ （FBXファイルと同じファイル名_a.拡張子）

→グレースケール画像で切り抜く場所を設定できる。白い部分が残り、黒い部分は切り抜かれる。複雑な形状のロゴをローポリで表現したいときなどに使える。

 カラーマップ （FBXファイルと同じファイル名_c.拡張子）
→グレースケール画像で白く設定した部分はアセットエディタ編集時に設定した数種の色の影響を受け、逆に黒い部分は色の影響を受けないようにできる。こうすることでゲーム内で出現する建物の任意の面にランダムで色のバリエーションを持たせることができる。

 また、LODモデルとそのディフューズテクスチャも読み込むことができるが、今回は省略する。これらのテクスチャを駆使して目的の表現を実現させる。

2.スペキュラマップをつくる

 それではさっそくスペキュラマップ（反射マップ）を書き出してみる。前の記事のような、ディフューズマップまで完成したモデルを用意する。

反射させたい面を新しいマテリアルで設定する場合
　反射させたい面（この場合は窓）を３Dエディタで選択し、プロパティウィンドウのマテリアルから新しいマテリアルを作成し、適用する。ミラーにチェックをいれ、反射色を白に設定。

 　ベイクモードを「ミラー色」にしてベイクする。
マテリアルでミラー強度を設定すれば「ミラー強度」でも同じような結果がでるが、後述の理由により「ミラー色」での書き出しをおすすめする。

反射させたい面を既存のマテリアルで設定する場合
　既存のマテリアルにもミラー色を設定するだけで反射を設定できる。その場合、関係ない場所に反射させたいマテリアルが適用されていないか注意しよう。

スペキュラ情報を持つテクスチャを設定する場合 
ディフューズテクスチャにスペキュラ情報を持つテクスチャを追加することで素材の微妙な光沢を表現することができる。販売されている高級なテクスチャにはディフューズの他に、バンプ（ノーマル同様凹凸の情報が含まれる）、スペキュラのマップが用意されているものも存在する。そういったものは大抵値が張るが、以下のサイトは上記３種が揃ったテクスチャのサンプルをフリーでダウンロードできる。（有償版と比べ解像度が低いが、それでも実用に耐えるクオリティだ）そのほか、ディフューズのテクスチャを画像加工ソフトでグレースケールにして編集することでバンプやスペキュラのマップを作ることもできる。
 
Arroway textures

以下の画像はarroway texturesからダウンロードしたテクスチャだ。（ディフューズだけ色に手を加えた）しまむらのモデルでは屋根に使用している。
茶色のがディフューズ、白黒がバンプ、黒っぽいのがスペキュラだ。

今回はあらかじめ設定されていたディフューズにスペキュラを設定する。プロパティウィンドウのテクスチャから、何もない項目を選択し、「新規」で追加し、スペキュラ情報を持つテクスチャを読み込む。下段にある「影響」の「ディフューズ」の「カラー」のチェックをはずし、影響の項目の「ミラー」にチェックを入れる。

 

 
プロパティウィンドウのレンダー下部のベイクでベイクモードを「ミラー色」にしてベイクするとスペキュラ情報を持つテクスチャのスペキュラマップも書き出される。テクスチャで設定したスペキュラ情報はなぜか「ミラー色」でないと出力されないようなので、最初に「ミラー色」をおすすめした。

同じように他のテクスチャにもスペキュラ情報を設定していくと、以下の様なスペキュラマップが書きだされる。UVエディタの画像から画像を別名で保存するのをお忘れなく。

次回はイルミネーションマップ、ノーマルマップの書き出しについてまとめます。一気に全部まとめたかったのですが、書くべきことがどんどん増えて長くなってしまいました・・。今回も突貫まとめのため、粗が目立ちますがお許し下さい。不明な点があればコメントでお知らせください。

【Cities:Skylines】Blenderで自作アセット！　イルミネーション・ノーマルマップ書き出し編へ

【Cities:Skylines】Blenderで自作アセット！ テクスチャベイク設定編

はじめに
2015年3月にリリースされた都市開発シミュレーションゲーム「Cities: Skylines」（C:S）ではFBX形式のCGモデルをアセットとして読み込むことで、ゲーム上に自作モデルを反映することができます。

ただし、C:Sアセットエディタの仕様ではFBX形式のモデル読み込み時に、外観の色などを設定するテクスチャは1枚の画像しか使えず、モデルのポリゴン面全ての外観・質感を1枚にまとめ、UV設定もする必要があります。そんな大変面倒な作業が少しでも楽になればと思い、Blenderでのテクスチャベイクの手順をまとめてみました。 

テクスチャベイクはモデルのポリゴン面に設定した外観・質感、マテリアルのUVなどをまとめて一枚の画像に保存してくれる機能です。現在はオープンソースソフトウェアのBlenderにおいてもテクスチャベイクの機能を手軽に使用することができます。

この手順までたどり着くためのモデリングやらマテリアル設定やら基本的なことはすっ飛ばしてます。それらはWEB上に分かりやすい解説が沢山ありますので、そちらを参考にしてください。私も試行錯誤しながらのまとめゆえ、分かりにくい箇所が多いと思いますが、ご了承ください。また、未検証なのであくまで私の環境でできる手順であって、このページを見てくださっている方の環境では上手くいかない可能性もあります。その際、不具合やできない手順があればお知らせください。Blenderのバージョンは2.73、日本語化環境です。

1．ベイクの準備

・アセット化したいオブジェクトの統合を済ませる。

・オブジェクトのトランスフォームの位置、回転、拡大縮小にチェックを入れる。

・マテリアル設定、テクスチャのUV設定を済ませる。
（この時、テクスチャは１枚のテクスチャでなくて良い）
また、この先は手順ごとに別名保存してバックアップをとることを推奨。
  

2．UVマップの追加

 
・プロパティウィンドウの オブジェクトデータからUVマップを追加する。
（すでにいくつかUVマップがある場合も追加）

3．ベイク用の画像を用意

・モデルを選択し、編集モードにしてメッシュを全選択。

・UVエディタで「新しい画像を作成」し、ベイク用の画像を作成する。
（画像サイズは1024×1024ピクセル以上で、辺のピクセル数は512の倍数が望ましい。）

※メッシュを全選択する前に「新しい画像を作成」すると、「テクスチャスタックに循環参照があります」と出てベイクできないので注意！その後「新しい画像を作成」しても何故か一部の面が黒くなったりして失敗するので手順を間違えないように！

4．UV展開

・メニューバーの「メッシュ」「UV展開」「スマートUV投影」の順に選択すると
ウィンドウが出る。数値はそのままでいいので、OKを押す。するとUVメッシュが自動で画像サイズに収まってくれる。

5．お試しベイク

・ベイクする前に、何らかの光源を置く必要がある。とりあえずランプオブジェクトで良いが、オススメはアンビエントオクルージョン（AO）だ。AOはメッシュの交差箇所や隅を判別して擬似的に陰を作ってくれるので、それっぽくみえるようになる。設定もプロパティウィンドウのワールドからAOの項目にチェックを入れるだけ。

・光源を置いたら、プロパティウィンドウのレンダー下部のベイクのベイクモードがフルレンダーになっていることを確認してベイクを押す。以下の様な画像が出たら、３Dビューのシェーディングをテクスチャにして、ベイクの手順に進む前に設定していたテクスチャとほとんど違いがなければ成功だ。（一枚の画像にテクスチャを収めているので解像度は荒くなる）
※一部黒くなっている面があったり、テクスチャが一部別のテクスチャになっていたり、端部に別のテクスチャの色が付いたり欠けていたりしてもこれからの手順で修正できるので、まだ慌てる必要はない。

6．UVメッシュの整理

・C:Sのアセット1つにつきに使用できるテクスチャは1枚だけ（ただし反射用、ノーマル用、光源用など効果ごと設定できる）なので、効率よくUVメッシュを配置して、ゲーム上においてより良い見た目を目指さなければならない。とくに外壁部分や看板部分などは目につくので大きめに設定してやる必要がある。目に付かないが場所を取り過ぎている面や、テクスチャが貼られておらず、単色マテリアルの面などはどんどん縮小して行くと良い。

・UVメッシュはUVエディタのツールバーにある島選択モード で選択するとひとかたまりで一度に選択できるので楽。

・UVメッシュの編集はショートカットキーで行う。Sキーが拡大縮小、Rキーが回転、Gキーが移動。また、それぞれのショートカットコマンドを実行中にXかYを押すことで変形が縦方向、横方向などに制限されるので便利。

7．UVメッシュの修正

・上でも触れたが、おかしな面など不具合は点検して行くことで修正できる（できないこともある）

・ 一部黒くなっている
→ 面が裏返っていると黒くなる。また、AOの設定次第では黒くなってしまう。あるいは光源が足りない。テクスチャのリンクが切れていても黒くなってしまうことがある。

・ テクスチャが一部別のテクスチャになっている、別のテクスチャになっている
→UVメッシュが重なっている 。島選択モードではなく、面選択モードなどで重なっている部分を移動する。また、３Dビューウィンドウでテクスチャがおかしくなっている面だけを選択して再度UV展開してやって縮小・配置することで重なっている面を簡単に修正できる。

・端部に別のテクスチャの色が付いたり欠けていたりする
→ 画像の端部や隣のUVと近づきすぎている。手作業で離すか、次の8の手順で修正できる。

8．UVメッシュの梱包

UVエディタでUVメッシュを全選択して、「UV」から「島の梱包」を選択すると、再度UVメッシュを自動で配置して画像内に収めてくれる。また、UVメッシュ同士をある程度離して配置してくれる。

9．仕上げ

  

・どうしても気に入らない部分は出てくるので、結局は手作業でまとめることが多い。パズルだと思ってUVメッシュの配置をすると楽しい・・はず

・とりあえずここでFBXを書き出す場合は、2.UVマップの追加で作成したUVマップ以外を削除する。（必ず別名保存してから行う）そうしないとC:Sのアセットエディタで読み込んだ際にテクスチャがおかしくなってしまう。また、ベイクしたテクスチャをUVエディタのメニューバーの「画像」から「画像を別名保存」して保存しておくことを忘れずに。

10．まとめ

・私自身もBlender覚えたてで試行錯誤しながら制作しているので、熟練者からしたら間違いやアホな手順を踏んでいることは間違いないと思います・・。もっと正しい手順をご存知の方がいれば、アドバイスお待ちしてます。

まあ、こうして私が犯した色々な間違いをメモしておくことで、他の方が同じミスで時間をムダにしないことになってもらえれば幸いです。次はテクスチャベイクを利用して反射マップ、ノーマルマップ、照明マップをお手軽に作る方法を紹介します。（こちらが本命）

【Cities:Skylines】Blenderで自作アセット！　テクスチャ解説＆スペキュラマップ書き出し編へ