まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを。参照していないものに関しては、コピペ改変まったく問いません

時短でUnityちゃんトゥーンシェーダを使う

Unityでアニメ調の見た目にしてくれる「Unityちゃんトゥーンシェーダ」。Unityに慣れてるヤツしか触るな!的で、モデリング始めたばかりの方にはややとっつきにくい印象があります。
なので、Unityに触ったことがないという方でも分かるようにできるだけ細かく書いてみました(たぶん私が忘れるので・・・)。
とりあえず、超簡単に使うための方法です。詳細な設定は、Unityちゃんトゥーンシェーダをダウンロードするとついてくるご本家のマニュアルを参照ください。

とにかく時短、ということで、Unityちゃんトゥーンシェーダを使うにあたり以下の制約条件のもと設定しています。
・表情モーフなし、スカートなどの揺れボーンなし
・Mixamoで自動でボーン&スキニング設定をする
・目以外のテクスチャはなし、3Dアプリで設定するマテリアルは色のみ

表情モーフありの設定バージョンは後日に。

記事執筆にあたり、こちらを参照させて頂きました。

www.slideshare.net
www.youtube.com


■UnityとUnityちゃんトゥーンシェーダをダウンロード
1.下記からUnityをダウンロードする
store.unity.com
2.下記からUnityちゃんトゥーンシェーダをダウンロードする
ユニティちゃんトゥーンシェーダー2.0 - ダウンロード - UNITY-CHAN! OFFICIAL WEBSITE


■モデルを用意する
1.3Dアプリで「.fbx」形式でモデルを書き出す。このときにテクスチャをfbxファイルと同じファイル階層に置くこと(テクスチャ作成時から注意しておく)
※mixamoを使って自動でボーンを入れる場合は、バージョンを「FBX7.4バイナリ」または「FBX2014」にして書き出し、.fbxファイルとテクスチャファイルをフォルダにまとめてZIP圧縮する。それをmixamoのサイトでアップロードしてください。そしてできた.fbxファイルを使用します
2.Unityを立ち上げ、プロジェクトファイルを作成する
3.「Assets」を右クリックして、「Create」を→「Folder」を選択してフォルダを作る
4.「New Folder」の名前を「Textures」にする
5.「Textures」フォルダの中にモデルのテクスチャデータをドラッグする
6.「Assets」を右クリックして、「Inport New Assets」でfbxファイルを選ぶ
f:id:prince9:20180605175231p:plain
7.「Inspector」→「Materials」を選択し、下記のようになっているか確認する
・Import Materialsにチェックが入っている
・「Location」が「Use Embedded Materials」になっている
f:id:prince9:20180605175453p:plain


■ボーンの対応付けを確認する
8.「Assets」→モデルのフォルダをクリックし、下記を行う
・「Inspector」→「Model」を選択し、「Import Cameras」「Import Lights」のチェックを外す。さらに「Apply」を押す
f:id:prince9:20180606214420p:plain
・「Inspector」→「RIg」を選択して、「Animation Type」を「Humanoid」にして「Apply」を押す
・「Inspector」→「RIg」の「Avator Definition」にチェックが入っているか確認する
f:id:prince9:20180605202648p:plain

※ここで「Avator Definition」に×印がついている場合は3Dアプリで作ったボーンとUnityとのリンクが上手くいっていないので、下記のような方法を取る
8-1.「configure」をクリックすると、「Hierarchy」に「Avatar Configuration」という項目が出てくるので、対応するボーンを「Inspector」のそれぞれの対応項目にドラッグする
f:id:prince9:20180605203348p:plain
8-2.対応付けが終わったら、人型がすべて緑色になっていることを確認して「Apply」ボタン→「Done」ボタンを押す
8-3.「Avator Definition」が×印からチェック印に変わっていればOK


■マテリアルを設定する
Unityに読み込むとマテリアルとテクスチャの紐付けが取れてしまっているので、それを結び直します
9.「Inspector」→「Materials」で下記の「Extract Materials」をクリックする
f:id:prince9:20180608031746p:plain
10.「Asstes」フォルダの中に新しく「Materials」フォルダを作り、「Choose」を押す
11.そうすると自動的にマテリアルを紐づけてくれる


■Unityちゃんトゥーンシェーダを使う準備
12.「File」メニュー→「Build Settings」→「PC,Mac&Linux Standalone」が選択されている状態で「Player Settings」をクリックし、「Other Settings」→「Color Space」を「Linear」にする
f:id:prince9:20180703042051p:plain
13.「Hierarchy」ウィンドウの「Directional Light」をクリックし、「Color」を白にする
f:id:prince9:20180703043642p:plain

■照明とカメラの設定をする
デフォルトの状態でUnityちゃんトゥーンシェーダを使うと、若干暗くなってしまう。なので、下記の設定を行う
14.「Window」→「Lighting」→「Settings」→「Enviroment Lignting」の「Source」を「Color」にして、「AmbientColor」を白系統にする
f:id:prince9:20180703194732p:plain
15.「Hierarchy」ウィンドウの「Directional Light」をクリックし、「Inspector」を下記のようにして仮の照明を設定する
(「UnityChanToonShaderVer2_Project-master」→「Assets」→「ToonShader.unity」のUnityちゃんが映っているシーンを参照)
f:id:prince9:20180703195916p:plain
16.「Hierarchy」ウィンドウの「Main Camera」をクリックし、を下記のようにして仮のカメラを設定する
f:id:prince9:20180703195932p:plain


■3Dモデルを表示する
17.「Assets」→モデルのフォルダを「Hierarchy」ウィンドウにドラッグする
f:id:prince9:20180606034803p:plain
18モデルが表示されるので、シーンビューの右上にある下記のようなアイコンに注目する。このアイコンの中央の□を右クリックして、「Front」を選ぶ
f:id:prince9:20180606214121p:plain
19.下記の方法でモデルを見やすい位置に持ってくる
・視点の平行移動 マウスのスクロールボタンを押す
・視点のズームイン/アウト マウスのスクロールボタンを動かす
・(必要であれば)回転 マウスの右クリックを押す


■モデルの身長を調整する
20.「GameObject」メニュー→「3D object」→「Cube」を選択し、立方体を表示させる
21.「W」キーを押す。次に赤色の矢印が出てくるので、先端をクリックしながらマウスを動かし、立方体を左に移動させる。モデルと並ぶように配置する
22.「R」キーを押す。次に緑色の■が出てくるので、先端をクリックしながらマウスを上に動かして、モデルと同じ「高さ」になるように拡大or縮小する
f:id:prince9:20180703045220p:plain
モデルと立方体の地面の高さが同じになるよう、18.と同じ方法で立方体を動かす
23.立方体がクリックされている状態で、「Inspector」→「Scale」の「Y軸」の値を確認する
この値(m)がモデル(アバター)のサイズと同じくらいであれば問題ないが、大幅に異なる場合は以下のようにモデルのサイズを調整する
23-1.モデルの拡大or縮小率を下記のように計算する
モデル(アバター)の身長(m)÷16.で確認した立方体のY軸のScaleの値
例:アバターの身長が150cm(1.5m)で、立方体のY軸のScaleの値が3の場合
1.5m÷3m=0.5
23-2.「Assets」→モデルのフォルダをクリックし、「Inspector」→「Model」→「Scale Factor」に先ほど算出した拡大or縮小率を入力して(例の場合だと「0.5」)「Apply」を押す
24.「Hierarchy」ウィンドウの「Cube」を右クリックし、「Delete」を選択して立方体を消す


■Unityちゃんトゥーンシェーダで影をセットアップする
具体的にセットアップする項目は、赤色で囲ったところ。
f:id:prince9:20180703202856p:plain
25.「Assets」を右クリックして「Import Package」→「Custom Package」を選択する
26.2.でダウンロードして解凍した「UnityChanToonShaderVer2_Project-master」フォルダの「UTS2_ShaderOnly_v2.0.4_Release.unitypackage」を選択して「Open」を押す
27.「Import」ボタンを押す
28.基本の色や影の色のRGB値を知るため、3Dモデルの設定画(彩色済み)をPhotohopやSAI、クリスタなどで開いておく
29.「Assets」→「Materials」→マテリアル名をクリックし、「Shader」を「Toon_DoubleShadeWithFeather」にする

ここから影色・ハイライト色・輪郭線色などを設定していきます。これはすべての色(マテリアル)に対して行う。
30.「Inspector」に設定画面がずらずら出てくる。影色では下記が設定項目となる
f:id:prince9:20180703055526p:plain
目などテクスチャが必要なマテリアル(色)は、あらかじめ「Assets」→「Textures」フォルダにテクスチャファイルを入れておく。その上で、「Texture」の項目の「Select」ボタンを押してテクスチャを選択する。出てこない場合は、虫メガネアイコンのところにテクスチャのファイル名を入力する。

31.1カゲ(基本の影)と2カゲ(さらに濃い影)の色を設定する
f:id:prince9:20180703172507p:plain
32.「ShaderColor_Step」を0にしておく
f:id:prince9:20180703172821p:plain
33.「BaserColor_Step」のスライダを右に動かし、画面を見ながら影の出る具合を調整する
f:id:prince9:20180703172938p:plain
34.影の境界をボカしたい場合は「Base/Shade_Feather」の値を大きくする
f:id:prince9:20180703173112p:plain
35.2カゲを使う場合は「ShaderColor_Step」のスライダを右に動かし、画面を見ながら影の出る具合を調整する
f:id:prince9:20180703173323p:plain
36.2カゲの影の境界をボカしたい場合は「Base/Shade_Feather」の値を大きくする
f:id:prince9:20180703173450p:plain

■Unityちゃんトゥーンシェーダでハイライトをセットアップする
37.「HighColor」でハイライトの色を設定する
38.「HighColor_Power」でハイライトの強さを設定する
f:id:prince9:20180703174531p:plain

■Unityちゃんトゥーンシェーダでリムライト(反射光)をセットアップする
リムライトとは、キャラクターの背後から当てられる反射光のことです。主に女性や羽など、キャラクターを柔らかく見せるために使われます。
すごく分かりにくいですがこんな感じです。下図では髪の毛のハイライトは水色っぽい光ですが、よく見ると頭の輪郭と頭の間に真っ白な色を塗っています。これがリムライトの効果です。
厚塗りではよく使われます。
f:id:prince9:20180703175623p:plain
39.「RimLigntColor」で反射光の色を設定する
40.「RimLignt_Power」で反射光の強さを設定する
f:id:prince9:20180703180100p:plain

■Unityちゃんトゥーンシェーダで輪郭線をセットアップする
41.「Outline_Width」で輪郭線の太さを調整する
42.「「Outline_Color」で輪郭線の色を調整する
43.「Farthest_DIstance」で輪郭線の太さが変化し始める最短距離を設定する
f:id:prince9:20180703183531p:plain

トゥーンシェーダーのライセンスについて
© Unity Technologies Japan/UCL