DirectXTKでFPSカメラの実装方法
今回のお話は、DirectXTKで、ただ見下ろすだけとかではなく、動きを持たせたカメラを作りたい!!という人達に向けた物です。
コードは多少出てきますが、どちらかと言うと考え方の方を書いて行きますので、ご了承下さい。
初めに
まず最初に、カメラ自体の作り方は知っていますでしょうか?
カメラにはたくさんの要素が大事で、
カメラ座標、注視点、カメラの頭の方向。
他にも、投影面や画角などなど、、
このような要素を組み合わせてカメラができます。
今回は通常カメラの作り方はわかっているものとして進めていきます。
わからない人は他の記事を参考にしてみてください。
FPSカメラの作り方
では、本題一つ目のFPSカメラについて説明していこうと思います。
・プレイヤーの実装
まず、プレイヤーが必要です。よくある、velocityやpositionなどの要素を持ったプレイヤーをつくってください。
そして、一番重要なのがプレイヤーの角度をもたせてください。
・マウスの移動処理
次に、マウスの処理です。今回はマウスポインタの位置は中央に固定して、どのほうこうにどれだけ動かしたかを判定するという風に私は実装しました。例でいうとValorantやOWなどのような感じです。
今回私が用意した変数などはこちらです。

過去のマウスの位置と、現在の位置を取得することで、移動量が分かるようになります。
そしてその差分をゲットすることでカメラを動かそうという魂胆です。
Updateの中身はこのようにして行っています。
1.カーソルの位置を取得する
2.DeltaXとYにカーソルの今の位置 から 過去のカーソルの位置を引いた差分を入れる
3.画面中央に固定させるために、スクリーンから中央の位置をもらってくる
4.カーソルを見えなくさせる
5.カーソルの位置をスクリーンの中央にセットさせる
6.過去のマウスの位置を中央にする
7.何フレで移動させるのか
といった風に書かれています。
これで、DeltaXとYに差分が代入されつつ、マウスが邪魔にならないようになりました。
・プレイヤーの角度をマウスの差分で移動させる

このような処理を書くことで、プレイヤーの角度をマウスからもらった差分に変更することができます。
なぜ*0.05fをしているかというと、視点がものすごい速度で動くため、規制をかけています。
もっといい書き方があるかもしれませんが、初めての実装の時のもののままなので、後々リファクタリングで変更していきたいと思います。
・カメラ回転のために、行列をつくる
さて、ここからはクォータニオン、でもMatrixでもいいのですが、カメラをプレイヤーの角度とともに回す処理です。
クォータニオンでする場合は、さきほどのm_playerAngleをそのまま変換していきましょう。
今回の実装はクォータニオンが分からない人のためにもMatrixで実装する方法で行こうと思います。

はい、簡単ですね。行列を作成するだけです。
あとはプレイヤーの移動方向にもこの回転行列をつけて動かせば、前に動きますし、カメラにもこの回転行列を渡して、回転するようにすれば動きます。
・クォータニオンで実装したい人へ
やっていることはMatrixとほぼ同じなのですが、こっちのほうが使い勝手がいいですよね。

rotationXとYの先は伏せておきますが、このように回転をつけることで、クォータニオンでの実装ができます。
補足
さて、ここまで作ってこられたでしょうか。
あまりコードを見せていないので、わからん!!って人の方が多い気がしたので、補足していこうと思います。(わからないから見ているだろうにすいません)
ざっとこんな感じでやっています。
カメラつくってマウスの差分取得、その分カメラぶん回す!
カメラつくるのとマウスをつくるのはすぐにできると思います。
カメラぶん回すときに、どこに何入れるんだって話です。
カメラの要素にはいろいろなものがあり、そのなかで、今回動かすのはEyeです。

今見たら、ここでForward作らなくても行けますね…。
targetの方向にプラスして回転させていくことで、見る位置がぐるぐる回っていくようになっています。
他にも、ぐるぐる回ることへの規制は

こういう感じに、angleの規制をしたりしています。