以下の内容はhttps://www.karvan1230.com/entry/2022/04/12/210637より取得しました。


【アセット紹介】設定が簡単で多機能なトゥーンシェーダー「lilToon」

f:id:Karvan:20220412203907p:plain

肩透かし

ワクチン接種(3回目)の副反応に備えてアレコレと準備をしていたのに腕の痛み以外は症状が全然でなくて肩透かしを食らった皆さんこんにちは。2回目の時はかなりの発熱の症状がでたので怯えていたのですが、今のところ平熱を保っています。会社を休む準備もしていたので少しがっかり。

 

lilToon

Unityでトゥーンシェーダーといえば「ユニティちゃんトゥーンシェーダー」が有名ですが、他にも優秀なトゥーンシェーダーは数多く存在していて、その中でも今回紹介する「lilToon」シェーダーはかなり有用だと思います。
既存のシェーダー(Standard等)から「lilToon」シェーダーに置き換えだけでそれっぽいトゥーン調の画面を簡単に作ることができますし、かつ、シェーダーのエディタが日本語対応かつ日本語ドキュメントも存在するので導入に対する障害がかなり少ないです。

lilxyzw.booth.pm

上記のリンクでもお分かりの通り、「lilToon」はアセットストアではなくBOOTHで公開されているシェーダーで、基本無料で使うことができます。500円を投げ銭として渡すことができるので、このシェーダーを導入して満足された方は今後の支援の意味も込めて検討されると良いでしょう。

 

使い方

前述のようにモデルに設定されているマテリアルのシェーダーを「lilToon」に置き換えるだけでトゥーン調に変換することができます。

下の画面内のモデルは全てStandardシェーダーで描画されていますが

f:id:Karvan:20220412204214p:plain

 

これを全てlilToonに置き換えると

f:id:Karvan:20220412204403p:plain

こんな感じに画面がトゥーン調の絵柄となったことが分かると思います。

 

設定を変えてみる

Inspectorを見ればオプションとして色々と設定が用意されているので、ちょっと設定を追加してみましょう。

f:id:Karvan:20220412204609p:plain

最初に影のチェックボックスをONにします。

f:id:Karvan:20220412204733p:plain

チェックボックスをONにすると影用の設定が色々と表示されますが、とりあえず今回はデフォルトのままとします。

f:id:Karvan:20220412204925p:plain

デフォルト設定のままでも綺麗な影がつきます。

 

次に鳥のモデルに発光設定も追加してみます。

f:id:Karvan:20220412205203p:plain

チェックボックスをONにして、発光色を決めます。

f:id:Karvan:20220412205322p:plain

 

最後に輪郭線も追加

f:id:Karvan:20220412205454p:plain

こちらは設定が難しかったです。太さを大きくすると線が途切れ途切れになったりしますが、色々と調整すると

f:id:Karvan:20220412205609p:plain

まぁ、それなりに整った輪郭線が表示できます。

 

動画で比較

折角なのでここまでの変化を動画でも比較してみます。

  • 全てStandardの場合
f:id:Karvan:20220412205836g:plain

 

  • lilToonに置き換えた場合
f:id:Karvan:20220412205940g:plain

 

  • 影+発光の設定を加えた場合
f:id:Karvan:20220412210037g:plain

 

  • 輪郭線を加えた場合
f:id:Karvan:20220412210128g:plain

 

まとめ

上記のように設定をアレコレいじらなくてもそれなりの画面が作れるので、導入の工数がかなり少なくて済みます。
こだわった設定をしたい場合は、「詳細設定」のボタンを押すと細かい設定もできるようです。
その場合は公式のドキュメントを参照してください。

lilxyzw.github.io

因みに輪郭線に関しては上の画面からもわかるように他のシェーダーと同様、綺麗な線を表示するのは難しいと思われるので、輪郭線付きの画面を作りたい場合はカメラエフェクトを使用する方が良いと思います。

  • lilToon+カメラエフェクト(Beautify)の輪郭線を使った場合
f:id:Karvan:20220412210414g:plain

 




以上の内容はhttps://www.karvan1230.com/entry/2022/04/12/210637より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14