この記事ではclusterクリエイター・熊猫土竜さんによるワールド「Color Cats in NewYork」を例にUnityの機能Post Processingを応用したワールド表現について解説します。実例を交えて解説しているので、まずはワールドを訪れるだけでもOKです。
こんにちは熊猫土竜です。
ポストプロセスによるワールドの色表現、ポストプロセスとアニメーションを組み合わせて実現できる、フェードイン・フェードアウトのつくり方を解説します。
本記事では、私の制作した「Color Cats in NewYork」を基に紹介していきます。まだワールドに行ったことがない方は記事を読む前にぜひ行ってみてください。
実装例：モノクロの世界で色を取り戻す謎解きワールド
簡単にワールドの紹介をすると、プレイヤーはニューヨークの各地にいる猫のお願い事を聞きながら先に進んでいく一人プレイ用の謎解きゲームです。
そのお願い事のきっかけとなるのが「失った色を取り戻したい」という動機で、最初にワールドに入った時には画面全体がモノトーン、白黒になっています。
ワールド内にあるオブジェクトに色がついていないという意味ではなく、ユーザーのアバターも白黒です。物語が進むと、赤、青、緑の色をそれぞれ取り戻すことができ、最終的には色のついた世界になるというワールドになっています。
Post Processingでワールドの色をコントロールする
このモノトーンやパートカラー（白黒の中に一色だけ挿し込む）をコントロールしているのがUnityの機能であるPost Processing（以下、ポスプロ）です。
ポスプロは描画負荷を高めてしまうので、バランスを見ながら使う必要がありますが、様々な見え方をつくる上では役に立つ機能です。
ポスプロの中でよく使われる機能はBloomかと思います。
一般的にはライトやemissionによる発光をより美しく表現するために使います。たとえば、私の別のワールド「降雪神社」は訪れる実際の時間帯と連動しワールド内の時間も変わるため、ライトを置くことやベイクができないのですが、夜の時間だけ灯篭の中にemissionつきのCUBEを表示させるようにし、Bloomをかけることでライトを使わずに照明を表現しています。
ポスプロについての基本的な使い方は公式記事を参照してください。さて、今回の記事ではBloomではなくカラーグレーディングを使っていきます。
カラーグレーディングはその名の通り、ワールドの色味を変えることができる仕組みです。先述の通りアバターの色味にも影響するため、ワールドというより見え方に影響を与えると言ったほうが的確かもしれません。
ここでまず縦のRed,Green,Blueすべてにチェックを入れ、さらに横のRed,Green,Blueタブを変えながら数値をいじります。モノトーンにしたい場合は全てのタブのすべての数値を100にします。個人的にはその上のContrastの値も少しいじると、より引き締まったモノトーンがつくれるので好きですが、好みもあると思うので自分なりの数字を見つけてみてください。
パートカラーを創る場合、例えば白黒の中で青だけに色を付けたい場合は、この数値からBlueタブ「以外」のタブのBlue数値を0にします。
パートカラーとはスティーヴン・スピルバーグ監督の映画「シンドラーのリスト」など、多くの映画や作品でも用いられていますが、例えば華の赤さだけを残して際立たせるなど、様々な表現に使えます。
ポスプロを応用してワープ表現をつくる
「Color Cats in NewYork」ではこの色のコントロールだけでなく、場所移動の際などにカラーグレーディングを入れることで、場所から場所へのワープに変化をつけています。
具体的にはワープの際に一度白くなり、ワープをさせた後で白から戻しています。
真っ白のつくり方もそれぞれあるかと思いますが、今回はモノトーンの状態からSaturationとコントラストを-100にすることでつくっています。
Animationを使ってフェードイン・フェードアウトの表現をつくる
さて、このままだと色がいきなり白くなりいきなり戻る状態になってしまいます。徐々に白くフェードアウトし、元の色にフェードインする形を作りたかったため、アニメーションを用いました。
アニメーションの基本もまた公式記事をご参考頂ければと思いますが、このフェードアウト・インでアニメーション設定しているのはポスプロのWeight値です。
アニメーションで始点0から1に上げ、1の状態を少しキープし0に戻すことでフェードアウト・インを表現しています。
ワープのトリガーを実行（今回の場合はOn Collide Item Triggerを使い、触れたとたんに実行）したときにアニメーションとタイマーの信号を飛ばし、タイマーの方では1秒後にワープするよう設定します。
アニメーションの方は真っ白に作ったカラーグレーディングのWeight値を1秒で0から1に変更、真っ白になっている間にプレイヤーをワープさせ、1から0に戻していくことでワープ時のフェードアウト・インとしています。
なお、今回のワールドでは同時にBＧＭのクロスフェードならびに移動先のアイコンをUI表示させタイミングを合わせることで、別の場所に移動した感覚を直感的にわかるように工夫しています。
アイコンのフェードイン・アウトに関してはCanvas GroupのAlpha値を同じようにアニメーション制御で0から1、１から0にしています。
本ワールドでは猫のダイアログに関しても文章の切り替えにこのフェードイン・アウトを用いています。このことにより、ぱっぱと切り替わるカットではない会話感覚をうみだしています。
話を戻すとモノトーンから色を取り戻す際にもアニメーションをかけ、ここはすこしゆっくりにすることで猫の依頼を終えた達成感、ゲームとしてのカタルシスを得てもらうことにつとめています。
特定のプレイヤーだけに適用されるようにする
さて、ポスプロはそのまま入れると全てのプレイヤーに同じように適用されます。つまり、誰かがワープする度に他のプレイヤーも真っ白な一瞬ができてしまいますし、そもそもワールドの根幹である、モノトーンから色を取り戻す部分が他のプレイヤーと連動してしまっては成立しません。
そのため、ポスプロ自体をPlayer Local UIの中に入れておく必要があります。メニューのGameObjectからUI＞Player Local UIを選べばヒエラルキー上にPlayer Local UIができますのでその配下に入れるだけです。
あとはトリガーなどを作り込むときにOwnerやPlayerを対象先に選択していけば、それぞれの効果はプレイヤーのみへの適用となり、他のプレイヤーに影響することがなくなります。
今回のワールドではカラーグレーディング、UI、ロジックなど多くのことに私も初挑戦しました。今後も使えそうなテクニックを手に入れたので、共有したいと書き残させていただきました。単純にパートカラーの色を変更して楽しむようなアーティスティックなワールドなどでも応用可能だと思います。
ゲーム系ワールドはほぼ制作経験がなかった私でも、一応成立するゲームを創れたので、みなさんもきっと素晴らしいものが創れるはず。ぜひ挑戦してみてください。
