12/08/2018, 15:15

Day 18 - Toon rendering

さて、それではグラフィック、見た目のところについて学習します。 まずはシェーダーとかレンダラーって何?ってところからなんですが、以外と明確に定義してる情報が無いんですよね。 僕は、ゲームによって様々なグラフィックの種類があり 種類分けをする時は「リアル系」だとか「アニメ系」とか言って その「~~系」を作っている部分がシェーダーとかレンダラーだという認識でした。 質感の調整って言うんですかね? 僕の大好きなジャンルにトゥーンレンダリング?っていうアニメ調のグラフィックをしたゲームがあるんですけど トゥーンシェーダーってのと何が違うんだろう? ...

さて、それではグラフィック、見た目のところについて学習します。 まずはシェーダーとかレンダラーって何?ってところからなんですが、以外と明確に定義してる情報が無いんですよね。

僕は、ゲームによって様々なグラフィックの種類があり 種類分けをする時は「リアル系」だとか「アニメ系」とか言って その「~~系」を作っている部分がシェーダーとかレンダラーだという認識でした。 質感の調整って言うんですかね?

僕の大好きなジャンルにトゥーンレンダリング?っていうアニメ調のグラフィックをしたゲームがあるんですけど トゥーンシェーダーってのと何が違うんだろう?

↑トゥーン系のゲーム例としてボーダーランズってヤツです。 http://www.2kgames.jp/borderlands2/

実際に使ってまずは感覚で理解しましょう。

Unity-chan

ユニティちゃんって聞いたことありますよね、ない人も居るか。 この子ですね。

このキャラクター、アセットストアで無料で配布してるみたいです。 ちなみに関係ないですけど本名があるらしくて大鳥こはくって言うらしいです。

UnityChanToonShader

そして、トゥーン系のものをいじってみたいなあと思っていると まさにこのために用意されたかのようなシェーダー UnityChanToonShader2というものがありました。(1もあるらしいですが2のほうが機能がいっぱいあるそうです) http://jp.gamesindustry.biz/article/1705/17050902/ こちらが紹介記事になっています。

http://unity-chan.com/download/index.php こちらはシェーダーがダウンロードできるページです。 これを使うときもちゃんとライセンスは守りましょう。

ダウンロードを押すと、Zipファイルがダウンロードされるのでそれを解凍します。 解凍したファイルをUnity側でOpen Projectで選択することでUnity上で読み込めます。

プロジェクトウィンドウに色々と追加されますが、その中からToonShaderというシーンを開きます。

あれ?僕の想定してたトゥーンとなんかちょっと違う。 次に、ToonShader_CelLookというシーンを開きます。

あ、これですこれ。こんな感じの奴が好きなんですよね。 一つの絵みたいになってるこの感じ。

トゥーンといっても色々とあるのかと思ったけれど 実はトゥーンっていうものにも明確な定義は無くて個人の感覚でトゥーンかそうでないかを判断しているらしいです。

よっしゃ、このセルルックって書いてる方の表現について考えてみよう。 とりあえず目に入ってくるのはこのキャラクター周りに出ている黒い縁取り(アウトライン)ですね。 Unityで開発されていることで有名な白猫プロジェクトでもこの表現が使われています。

この縁、カメラを回転させてもちゃんとそこから見たキャラクターの周りにアウトラインがついてるんですよね。

ちょっと画面が汚いですが、正面から見た時に黒い縁がついているからといって カメラを回転させたときにも同じ位置に縁がついているわけでは無いことがわかると思います。

Let's try

これ、ちょっとやり方を知りたいな。 試しに新しいシーンを作って適当な白い球体を作成してみます。

はい。いつもの見た目ですね。 この球体のシェーダーを変更してやりたい。 しかし、何もデフォルトのマテリアルだとインスペクター上でシェーダーをいじるっぽい場所がグレーになっています。

なので、プロジェクトウィンドウからMaterialを作成。特に設定はいじらずに球体のコンポーネントに追加します。 次に、左上のAssetsタブからImport Package→Effectsを選択。 球体のインスペクターから、マテリアルの欄のShaderのプルダウンメニューを開いてToon→Basic Outlineを選択。

ぽん。 案外簡単にアウトラインを付けることが出来ました。

しかし、元は白かったはずなのに何故かとても黒くなってしまった。 一体どういうことだ。

Trial and error

Toonシェーダーの欄にはもう一つLit Outlineってのがありました。 Basicは光を当てた時に影が出来ず、Litは出来るのを確認しました。 が、色は灰色のまま。

まさか、黒で囲われたために起きた目の錯覚か!? Outlineをはずす。

灰色のまま。 Why Unity Shader!!

うーん、Shaderもスクリプトで設定が書かれてるみたいだから、そこの勉強をしたほうが良いかな? 明日はShaderの中身についての学習を行います。白くしてやるぞ。

とりあえず今日はここまで。

0