原カバンは鞄のお店ではありません。

Unityを使ったゲーム制作のあれこれを綴っていきます。

【Unity】トゥーンシェーダーとポストエフェクトで漫画風な画面を作る

f:id:Karvan:20220201211803p:plain

誰得

ここ最近、Twitterのタイムラインに頻繁に出没する謎のマス目だけの投稿に苛立ちを覚えて"wordle"をミュートワードに登録した皆さんこんにちは。投稿した本人以外意味不明なので勘弁してほしい。unity1weekでも偶に「●●さんがスコア××を獲得しました!」的なつぶやきをTwitterに自動投稿するゲームが見受けられますが、アレのおかげで閲覧数が伸びても評価には繋がらないので辞めた方が良いと思います。

 

漫画風な画面を作りたい

特に需要があるわけではないのですが、自作ゲームをちょっとインパクトのある画面にしたい場合、漫画風な画面にする、という選択肢も有りだと思っています。

「漫画風」とは、色々な意見があるかと思いますが、個人的には以下のような要素を含んだ画面だと考えています。

  • 基本的に画面は二色or三色で構成される
  • オブジェクトに対して明暗の境界がくっきりと分かれる
  • オブジェクト、背景に輪郭線が描かれる

特にUnit製のゲームの場合、巷で「Unity臭がある」と陰口を囁かれるケースを目にするので、それを感じさせないような絵作りの一つとして漫画風な画面造りもチャレンジするだけの価値はあると思います。

 

オブジェクトに対する設定

まず最初にオブジェクトに使用するシェーダーをトゥーンシェーダーに変更します。
今回使用するモデルはStandardシェーダーだとこんな感じ

f:id:Karvan:20220201212104p:plain

これを前々回に紹介したFlatKitToonシェーダーに変更します。

assetstore.unity.com

Colorのみ指定し、Cell Shading ModeでNone(なし)とすると

f:id:Karvan:20220201212210p:plain

ここからCell Shading Modeを「Step」に変更

f:id:Karvan:20220201212356p:plain

明暗の境界がくっきりと分かれて表示されるようになります。

f:id:Karvan:20220201212457p:plain

 

次に後で付与するアウトラインを補強するために「Rim」の設定を追加します。

f:id:Karvan:20220201212727p:plain

「Rim」は本来、オブジェクトの後ろに光源がある場合の回り込む光の具合を表現するために使いますが、ここでは暗い色を指定して背景からオブジェクトの輪郭が浮かび上がるような形に仕上げます。

f:id:Karvan:20220201212747p:plain

 

最後に「Specular」を設定して明るい部分をさらに明るくして

f:id:Karvan:20220201212928p:plain

Rimで表現する暗い部分が大きくなり過ぎないように調整します。

f:id:Karvan:20220201212905p:plain

 

輪郭線を付ける

輪郭線はポストエフェクトで表示します。シェーダーで表示する手もありますが、それだとあまり綺麗な線が描画できないし、オブジェクト内部のエッジ部分に線が描かれないのでポストエフェクトを使用した方がベターだと思います。
今回はFlatKitToonに付属していたアウトラインエフェクトを使用しています。

f:id:Karvan:20220201213126p:plain

 

これでオブジェクトに対する設定が完了です。同様に設定した背景と合わせるとこんな感じの画面になります。

f:id:Karvan:20220201213224p:plain

 

課題

これで万事OK、というわけではなくて課題もあります。
ポストエフェクトで表示する輪郭線は主に深度情報と法線情報を使って抽出されますが、その抽出の為の設定が以外にシビアです。

特に深度情報を使って輪郭線を抽出する手法では、その閾値を小さくすると地平線のような遠方にある輪郭線が過大に抽出されて塗潰されてしまいます。

f:id:Karvan:20220201213347p:plain

逆に閾値を大きくすると小さな輪郭線が表示されなくなります。下の図だと手前の歩道と道路の段差が輪郭線として表示されません。

f:id:Karvan:20220201213415p:plain

 

下の動画ではカメラが切り替わる毎に輪郭線を抽出する閾値を変更して何とか課題を解決しようと試みていますが、漫画風の画面を作りこむには更に工夫が必要になってきそうです。

f:id:Karvan:20220131001509g:plain

 

◇プライバシーポリシー

●個人情報の利用目的

当ブログでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前(ハンドルネーム)、メールアドレス等の個人情報をご登録いただく場合がございます。

これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。

●個人情報の第三者への開示

当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。

・本人のご了解がある場合
・法令等への協力のため、開示が必要となる場合

個人情報の開示、訂正、追加、削除、利用停止
ご本人からの個人データの開示、訂正、追加、削除、利用停止のご希望の場合には、ご本人であることを確認させていただいた上、速やかに対応させていただきます。

アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。

このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

●免責事項

当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。

当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

●プライバシーポリシーの変更について

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。