JOJOのザ・ワールドの表現に挑戦してみました。
※今回は必要なパラメーターを取得するまでの対応となります。
やってみたはいいものの、どうも納得のいくレベルに到達せず、詰めていくのに時間がかかりそうなのでここまでの内容を書いておこうと思います。
内容としては、表現に必要となるであろう最低限の要素の実装について記述します。
※実用性は現状低いため、今後改善していきます。
ちなみに現段階の完成形は以下になります。
ジョジョのアレっぽくないですか。#UE4 #UE4Study pic.twitter.com/xWesHBBu9T
— なお@エンジニアっぽくなりたい (@51FVK0BQUFpBQ0q) 2021年3月30日
目標
JOJOのザ・ワールド風の表現を作ってみる！
今回は必要なパラメーターを取得できるようにする対応までになります。
環境
・UE 4.26.1 (エンジンビルドはしていません)
やってみる
まずは要素を考えてみる。
・特定位置から球状にザ・ワールドのエリアが広がっていく
・ザ・ワールドのエリア外の表現
・ザ・ワールドのエリア越しの背景の表現
・ザ・ワールドのエリア内の表現
・ザ・ワールドのエリア内の特定のオブジェクト用（キャラクターなど）の表現
・それぞれの表現で色を調整できるようにする
という感じでしょうか。
ちなみに今回はグラフィック的な表現はすべてPostProcessMaterialで行います。
エリア内、エリア外、エリア越しを取得。
※この表現が一番問題があり、要検討内容になります。
ザ・ワールドのエリアを示す球を作成しエリア内、エリア外、エリア越しをPostProcessMaterialで取得できるよう対応します。
いろいろと迷った挙句、半透明を使い取得できるようにしてみました。
こうすることで、他で半透明が使えなくなる問題があるので、要検討です。。。
具体的に対応したいイメージは以下です。
のようなパラメーターを取得したいわけです。
上記の場合
赤：エリア内のオブジェクト
緑：エリア越しの背景
青：エリア外
を表しています。
Sphereに適用するマテリアル
Sphereの手前側、奥側を取得するために両面描画にし、それぞれ違う値を適用します。
値はなんでもいいですが、見た目に影響しない程度に薄くしています。※とても無理やりな対応となっています。
PostProcessMaterial
という具合で、Sphereの外側のみか内側と外側が重なっているかをPostProcessInput1のAから取得して処理することで可能です。
エリア内の特定のオブジェクト用（キャラクターなど）の表現
エリア内の背景オブジェクトとキャラクターは違う処理をしたくなったりします。
現にアニメでキャラクターと背景で違う表現です。
ここで取得したいのは以下のようなパラメーターになります。
※ここではキャラクターと背景を想定します。
赤：エリア内の背景オブジェクト想定
緑：エリア越しの背景（一部エリア内）にあるキャラクター想定
青：エリアの手前に存在するオブジェクト（キャラクターも同様）想定
黄：エリア内のキャラクター想定
となります。
この対応では、キャラクターとして扱うオブジェクトにCustomDepthを使用しています。以下のような感じ
それによってキャラクターのことを取得できるようになったのでPostProcessMaterialを少々改造し、以下のようにします
少し見にくいので追加部分をアップで
これで必要なパラメーターを取得できました。
次はこれらを踏まえて色の設定やちょっとした演出の内容になります。
正しい対応方法やより良い方法があればご指摘お願いいたします！！！
