はじめに
こんにちは。クライアントエンジニアの鈴木です。
今回はバトルのカメラで、iPadなどの縦長の端末でもキャラが見切れないようにしたいという要望があったので、実装してみました。
実装結果
まず、画像「1138×640(PC)」のように味方キャラ(青のCapsule)、敵キャラ(赤のCapsule)を映すように調整したカメラがあったとします。するとiPadのような縦長の端末では、画像「4:3 (iPad)」のように端側のキャラが見切れてしまう症状が起きることがあります。
これを補正したのが、下の画像「4:3 (iPad 補正後)」です。1138×640のカメラと同じような、キャラの見え方の横幅に調節できています。
実装方法
実はこの仕組みはいたって簡単です。下の説明画像を見てください。
黄色の線がカメラとVirtualCameraにセットされているLookAtまでの距離を表していて、青がFOV、赤が今調節したいキャラが見える画面幅です。
つまり、キャラが見切れてしまう場合は赤い線をうまく調節すればOKです。自分は二つの方法をデザイナーさんに提案しました。
方法1.カメラの距離で調整
方法2.カメラのFOVで調整
方法1の場合、カメラが引きすぎて、本来カメラの後ろにあったステージの背景が、カメラに写り込んでしまう症状が起こってしまいました。そのため、方法2で調節することになりました。
FOVの調節は以下のようにスクリプトを書いて行いました。
public class VirtualCameraFovInitializer : MonoBehaviour
{
[SerializeField]
private CinemachineVirtualCamera _vcam;
private void Start()
{
var baseAspectRatio = (float)640 / 1138;
var aspectRatio = (float)Screen.height / Screen.width;
if (aspectRatio > baseAspectRatio)
{
var currentDistance = Vector3.Distance(transform.position, _vcam.LookAt.position);
var newDistance = currentDistance * aspectRatio / baseAspectRatio;
_vcam.m_Lens.FieldOfView *= newDistance / currentDistance;
}
}
}
実は基本の仕組みは距離を調節するスクリプトと同じです。newDistanceの変数をカメラとLookAtの距離として代入すれば距離を調節した方法1になります。
※実際には、このスクリプトにどれくらい自動調節を反映させるかの係数を外だししてあげて、デザイナーさんに調節していただいています。
おわりに
今回は簡単な実装で調節しましたが、全ての3Dカメラに汎用的に応用するにはもう少し改修する必要があります。一つの解決方法としてぜひ参考になればと思います。