ディザリング透過や壁を考慮したカメラワーク [ゲーム開発ログ 2020-09-21]

2020-09-21

テスト用マップ

ゲームに使えるちゃんとしたカメラを実装しようと思い、まずはテスト用のテスト感あるマップを作った。

工作用紙っぽい見た目。子供の頃に工作用紙で色々と紙工作していた思い出が蘇ってきて、なつかしい気持ちになった。

ちなみに 1 マスが Unity 上で 1 メートルのスケールになっている。木以外のオブジェクトは Unity のエディタ上で ProBuilder を使って作成。 Unity はホント便利だ。ありがとう Unity。

それっぽいカメラワークと、ディザリング透過シェーダ

壁際に来たときにカメラが寄る挙動を実装した。3D ゲームでは定番のやつ。これはこうしたいというより、カメラが壁にめり込んで壁の裏側を見せてしまわないようにするため、仕方なくこうしなければならないという感じの実装。

カメラは遠くなった時に見下ろすような形、近くなった時に見上げるような形になるように視点の補正をかけている。これも右スティックでカメラを操作するサードパーソン視点のゲームではよくある挙動かと思う。

カメラの実装はこんな感じ。パラメータで細かい挙動をいじれる：

Alto-tascal-Unity-Lib/AltoThirdPersonCamera.cs · tatsuya-koyama/Alto-tascal-Unity-Lib

キャラは、カメラに近づきすぎたら疑似透過で半透明を経てからフッと消えるような処理をシェーダに実装。 3D ゲームではよく使われている手法かと思う。

同じ原理で、壁じゃないちょっとした障害物（木）はカメラの近くにきたら早くからフェードアウトを始める。 ポケモン剣盾 のワイルドエリアでも似たような処理が施されていたので、実装にあたって久しぶりにポケモン剣盾を起動してよく観察した。

この疑似透過はいわゆる ディザリング抜き とか呼ばれるやつで、不透明の描画パスで擬似的に半透明を表現する定番処理。見栄えはいまいちだが、軽い… というより半透明描画パスが重いので、半透明を使わないためによく採用される手法。

実装は以下のような雰囲気：

void DitheringByCameraDistance(Varyings input)
{
    float2 screenPos = input.positionCS.xy / _ScreenParams.xy;
    float2 ditherCoord = screenPos * _ScreenParams.xy * _DitherPattern_TexelSize.xy;
    float dither = tex2D(_DitherPattern, ditherCoord).r;

    float ditherRange = _DitherCameraDistanceFrom - _DitherCameraDistanceTo;
    float alpha = (input.cubicColor.w - _DitherCameraDistanceTo) / ditherRange;
    alpha = max(_DitherMinAlpha, alpha);
    clip(alpha - dither);
}