9/15からワールドクラフトストアが公開!自作のモデルをcluster内で使えるアイテムとして販売できます。誰でもチャレンジできるよう記事も公開しています。

Post Processingによるワールドの色表現、フェードイン・フェードアウトのつくり方の解説──「Color Cats in NewYork」を例に

この記事ではclusterクリエイター・熊猫土竜さんによるワールド「Color Cats in NewYork」を例にUnityの機能Post Processingを応用したワールド表現について解説します。実例を交えて解説しているので、まずはワールドを訪れるだけでもOKです。

こんにちは熊猫土竜です。

ポストプロセスによるワールドの色表現、ポストプロセスとアニメーションを組み合わせて実現できる、フェードイン・フェードアウトのつくり方を解説します。

本記事では、私の制作した「Color Cats in NewYork」を基に紹介していきます。まだワールドに行ったことがない方は記事を読む前にぜひ行ってみてください。

実装例:モノクロの世界で色を取り戻す謎解きワールド

簡単にワールドの紹介をすると、プレイヤーはニューヨークの各地にいる猫のお願い事を聞きながら先に進んでいく一人プレイ用の謎解きゲームです。

そのお願い事のきっかけとなるのが「失った色を取り戻したい」という動機で、最初にワールドに入った時には画面全体がモノトーン、白黒になっています。

ワールド内にあるオブジェクトに色がついていないという意味ではなく、ユーザーのアバターも白黒です。物語が進むと、赤、青、緑の色をそれぞれ取り戻すことができ、最終的には色のついた世界になるというワールドになっています。

Post Processingでワールドの色をコントロールする

このモノトーンやパートカラー(白黒の中に一色だけ挿し込む)をコントロールしているのがUnityの機能であるPost Processing(以下、ポスプロ)です。
ポスプロは描画負荷を高めてしまうので、バランスを見ながら使う必要がありますが、様々な見え方をつくる上では役に立つ機能です。

ポスプロの中でよく使われる機能はBloomかと思います。
一般的にはライトやemissionによる発光をより美しく表現するために使います。たとえば、私の別のワールド「降雪神社」は訪れる実際の時間帯と連動しワールド内の時間も変わるため、ライトを置くことやベイクができないのですが、夜の時間だけ灯篭の中にemissionつきのCUBEを表示させるようにし、Bloomをかけることでライトを使わずに照明を表現しています。

▲降雪神社の灯篭は夜のみBloomで明るくしている

ポスプロについての基本的な使い方は公式記事を参照してください。さて、今回の記事ではBloomではなくカラーグレーディングを使っていきます。

カラーグレーディングはその名の通り、ワールドの色味を変えることができる仕組みです。先述の通りアバターの色味にも影響するため、ワールドというより見え方に影響を与えると言ったほうが的確かもしれません。

ここでまず縦のRed,Green,Blueすべてにチェックを入れ、さらに横のRed,Green,Blueタブを変えながら数値をいじります。モノトーンにしたい場合は全てのタブのすべての数値を100にします。個人的にはその上のContrastの値も少しいじると、より引き締まったモノトーンがつくれるので好きですが、好みもあると思うので自分なりの数字を見つけてみてください。

▲モノトーンにしたい場合の設定
▲コントラスト数値が0の時
▲コントラスト数値が100の時

パートカラーを創る場合、例えば白黒の中で青だけに色を付けたい場合は、この数値から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に戻していくことでワープ時のフェードアウト・インとしています。

なお、今回のワールドでは同時にBGMのクロスフェードならびに移動先のアイコンをUI表示させタイミングを合わせることで、別の場所に移動した感覚を直感的にわかるように工夫しています。

アイコンのフェードイン・アウトに関してはCanvas GroupのAlpha値を同じようにアニメーション制御で0から1、1から0にしています。
本ワールドでは猫のダイアログに関しても文章の切り替えにこのフェードイン・アウトを用いています。このことにより、ぱっぱと切り替わるカットではない会話感覚をうみだしています。

▲会話アニメーションの例 切り替える時にCanvas GroupのAlpha値で自然にフェード

話を戻すとモノトーンから色を取り戻す際にもアニメーションをかけ、ここはすこしゆっくりにすることで猫の依頼を終えた達成感、ゲームとしてのカタルシスを得てもらうことにつとめています。

特定のプレイヤーだけに適用されるようにする

さて、ポスプロはそのまま入れると全てのプレイヤーに同じように適用されます。つまり、誰かがワープする度に他のプレイヤーも真っ白な一瞬ができてしまいますし、そもそもワールドの根幹である、モノトーンから色を取り戻す部分が他のプレイヤーと連動してしまっては成立しません。

そのため、ポスプロ自体をPlayer Local UIの中に入れておく必要があります。メニューのGameObjectからUI>Player Local UIを選べばヒエラルキー上にPlayer Local UIができますのでその配下に入れるだけです。
あとはトリガーなどを作り込むときにOwnerやPlayerを対象先に選択していけば、それぞれの効果はプレイヤーのみへの適用となり、他のプレイヤーに影響することがなくなります。

▲他のプレイヤーと影響を与え合わない内容はPlayer Local UI配下へ

今回のワールドではカラーグレーディング、UI、ロジックなど多くのことに私も初挑戦しました。今後も使えそうなテクニックを手に入れたので、共有したいと書き残させていただきました。単純にパートカラーの色を変更して楽しむようなアーティスティックなワールドなどでも応用可能だと思います。

ゲーム系ワールドはほぼ制作経験がなかった私でも、一応成立するゲームを創れたので、みなさんもきっと素晴らしいものが創れるはず。ぜひ挑戦してみてください。

クリエイターのためのコミュニティ「Cluster Creator Community Discord」
分からないことがあったら、クリエイターのためのコミュニティDiscord「Cluster Creator Community Discord」の「質問・相談」チャンネルで質問してみるのがおすすめです!
参加はこちらから→https://discord.gg/DHQmAfDhkt


CreatorsGuideでは一緒にワールドづくりを盛り上げてくれるライターを募集しています。
採用された方には謝礼として1記事あたりAmazonギフト券5,000円。

詳細・応募は下記の記事から


最後に公式による記事や多くのクリエイターの皆さんによるドキュメントやコミュニティを紹介します。
ぜひ活用して自分だけのワールドを制作してみましょう!

▼ 「Cluster Creator Kit」の全てが分かる公式ドキュメント
Cluster Creator Kit ドキュメントhttps://docs.cluster.mu/creatorkit/

▼ クリエイターによる投稿記事まとめ
ワールド制作部https://note.com/cluster_official/m/m1fd772ab8f45
アバター制作部https://note.com/cluster_official/m/m6b18e343f35c
イベント制作部https://note.com/cluster_official/m/m7155e6f6887f

▼ 分からないことがあればコミュニティを活用してみましょう!
Cluster Creator Community Discord
https://discord.gg/DHQmAfDhkt

記事をシェアしてワールド制作を盛り上げよう!
ABOUT US
熊猫土竜PandaMogura
21年5月CUBEの世界再び 空間活用部門賞★お題企画8月スワンマン賞、10月・22年1月大賞受賞。写真展・火星銭湯・降雪神社などをやってます!寝ころ部部長。たまにイベンター、ダンサー、歌い手、司会者。映像撮影編集も。