誰得
ここ最近、Twitterのタイムラインに頻繁に出没する謎のマス目だけの投稿に苛立ちを覚えて"wordle"をミュートワードに登録した皆さんこんにちは。投稿した本人以外意味不明なので勘弁してほしい。unity1weekでも偶に「●●さんがスコア××を獲得しました！」的なつぶやきをTwitterに自動投稿するゲームが見受けられますが、アレのおかげで閲覧数が伸びても評価には繋がらないので辞めた方が良いと思います。
漫画風な画面を作りたい
特に需要があるわけではないのですが、自作ゲームをちょっとインパクトのある画面にしたい場合、漫画風な画面にする、という選択肢も有りだと思っています。
「漫画風」とは、色々な意見があるかと思いますが、個人的には以下のような要素を含んだ画面だと考えています。
- 基本的に画面は二色or三色で構成される
- オブジェクトに対して明暗の境界がくっきりと分かれる
- オブジェクト、背景に輪郭線が描かれる
特にUnit製のゲームの場合、巷で「Unity臭がある」と陰口を囁かれるケースを目にするので、それを感じさせないような絵作りの一つとして漫画風な画面造りもチャレンジするだけの価値はあると思います。
オブジェクトに対する設定
まず最初にオブジェクトに使用するシェーダーをトゥーンシェーダーに変更します。
今回使用するモデルはStandardシェーダーだとこんな感じ
これを前々回に紹介したFlatKitToonシェーダーに変更します。
Colorのみ指定し、Cell Shading ModeでNone(なし)とすると
ここからCell Shading Modeを「Step」に変更
明暗の境界がくっきりと分かれて表示されるようになります。
次に後で付与するアウトラインを補強するために「Rim」の設定を追加します。
「Rim」は本来、オブジェクトの後ろに光源がある場合の回り込む光の具合を表現するために使いますが、ここでは暗い色を指定して背景からオブジェクトの輪郭が浮かび上がるような形に仕上げます。
最後に「Specular」を設定して明るい部分をさらに明るくして
Rimで表現する暗い部分が大きくなり過ぎないように調整します。
輪郭線を付ける
輪郭線はポストエフェクトで表示します。シェーダーで表示する手もありますが、それだとあまり綺麗な線が描画できないし、オブジェクト内部のエッジ部分に線が描かれないのでポストエフェクトを使用した方がベターだと思います。
今回はFlatKitToonに付属していたアウトラインエフェクトを使用しています。
これでオブジェクトに対する設定が完了です。同様に設定した背景と合わせるとこんな感じの画面になります。
課題
これで万事OK、というわけではなくて課題もあります。
ポストエフェクトで表示する輪郭線は主に深度情報と法線情報を使って抽出されますが、その抽出の為の設定が以外にシビアです。
特に深度情報を使って輪郭線を抽出する手法では、その閾値を小さくすると地平線のような遠方にある輪郭線が過大に抽出されて塗潰されてしまいます。
逆に閾値を大きくすると小さな輪郭線が表示されなくなります。下の図だと手前の歩道と道路の段差が輪郭線として表示されません。
下の動画ではカメラが切り替わる毎に輪郭線を抽出する閾値を変更して何とか課題を解決しようと試みていますが、漫画風の画面を作りこむには更に工夫が必要になってきそうです。
