Joël van der Werf
記事一覧

ペラペラのキャラクターに影を落とす

太陽用のシャドウマップ1枚、光の方を向く影用のスプライト、そしてスプライトが自分の影で暗くならないための工夫。

スプライトを3D空間に立たせたら、次は影です。2Dと3Dを組み合わせたゲームでは、平面のキャラクターが3Dの世界に説得力のある影を落とすことが、シーンの立体感を大きく支えます。Hydroでも、太陽用のシャドウマップ1枚で同じことができるようになりました。

マップは1枚、カスケードなし

広いオープンワールドでは、視界をシャドウマップのカスケードに分割します。ジオラマでは見える範囲が狭いので、その必要はありません。1024〜4096テクセル四方の深度マップを1枚、メインカメラの注視点に向けて太陽光の方向から見る平行投影のカメラで描きます。

  • 光のカメラは太陽の方向へ60メートル下がった位置から始まるので、視界のすぐ外にある物体の影も入ってきます。
  • 投影はテクセル単位にスナップしているので、カメラが動いても影の輪郭がちらつきません。

影を落とすスプライト

メッシュは通常どおりマップに描かれます。カットアウトのスプライトも、画面と同じくアルファ0.5でテストしながら描かれます。問題は、カードがどちらを向くかです。モードは2つあります。

  • 描画どおり:カメラを向いた矩形がそのまま影になる。軽いが、横から日が当たると影が細い線になる。
  • 太陽を向く:矩形のコピーをスプライトの足元に立て、太陽の方へ向ける。影は常にキャラクターのシルエット全体になります。コピーはカメラの向きに近い方へ回るので、スプライトの左側の影は左に落ちます。

自分の影で暗くならない

難しいのは影を受ける側です。スプライトが自分の位置でシャドウマップを参照すると、そこには自分自身の影用のカードがあり、自分で自分を暗くしてしまいます。

解決策:スプライトの各頂点に、別の影の参照位置を持たせます。自分の「太陽を向いた」影用カード上の対応する点を、太陽の方へ少しずらした位置です。こうすればスプライトは、太陽との間に立っている何かによってだけ暗くなり、自分によっては暗くなりません。メッシュも法線方向の小さなオフセットで同じことをしています。

Oxygenのレンダー設定:太陽のシャドウマップのサイズ、ソフトシャドウ、スプライトの影、HDR、ブルーム、被写界深度、ピクセルスナップ
この記事の設定をエディタで:太陽のシャドウマップのサイズ、ソフト/ハードな影、スプライトの影を「描画どおり」か「太陽を向く」か。各シーンでプロジェクトの設定を上書きできます。

ピクセルアートに合う影

  • 影になるのは太陽の直接光だけです。環境光、ポイントライト、スポットライトは影の中にも届くので、灯籠は影の中でも光ります。
  • ソフトシャドウは3×3でサンプリングしますが、ハードモードもあります。テクセルごとに1サンプルで、ピクセルアートの隣に合う、くっきりした段差のある輪郭になります。
  • 強さ、距離、バイアスはライトごとに設定でき、統計ウィンドウでシャドウパスのGPU時間を確認できます。
前の記事:3D空間にピクセルアートのスプライトを立てる:カード、カットアウト、深度次の記事:トーンマップの「トゥ」を外した理由

お仕事のご相談はお気軽にどうぞ

東京在住です。Unity・C++・ゲームエンジン関連のポジション、C#・.NETのソフトウェア開発のポジション、そしてAIエージェントを活用した開発体制づくりに関心があります。英語・オランダ語・日本語(勉強中)で対応できます。