概要
この記事ではUnreal Engine 5で、下記のそれぞれの条件下で、ウィジェット上のマウスカーソルの座標を適切に取得する方法をお話しします。
- ウィジェットとウィンドウ画面のアスペクト比が同じとき
- ウィジェットとウィンドウ画面のアスペクト比が異なるとき
- ゲームプレイ画面が小さいとき
この記事の主な対象者
- Widget Blueprint（WBP）の作り方の基礎を習得されている、初心者の方
前提知識
この記事における「ウィジェット上の座標」というのは、WBPのエディタの座標のことを指します。
例として、ウィンドウ画面でマウスカーソルが下図の位置（ウィジェット部分の中心）にある場合を考えます。
（上図は、下の記事で作成した、アスペクト比が一定になるウィジェットを表示したときのウィンドウ画面です。）
上図の場合における「ウィジェットの座標」というのは、下図のように、ウィジェットブループリントにおける中心の座標のことを指します。（下図だと、赤枠で囲ったサイズを2で割った、緑色の文字の座標となります。）
1. ウィジェットとウィンドウ画面のアスペクト比が同じとき
ウィンドウ画面上のマウスカーソルが、画面に表示しているウィジェット上のどこにあるかを取得するには、下図の「Get Mouse Position on Viewport」ノードを使用します。
下の動画のように、「Get Mouse Position on Viewport」ノードから取得した値をメッセージとして画面左上に表示してみると、適切な値が取得できていることがわかります。
（この記事で用いているウィジェットのサイズは、1922 × 1081 ですので、ウィンドウ画面左上端の座標が (0, 0)、右下端の座標が (1922, 1081) となっていれば、正常にウィジェット上におけるマウスカーソルの位置を取得できているとわかります。）
2. ウィジェットとウィンドウ画面のアスペクト比が異なるとき
この記事では下の動画のように、アスペクト比が一定になるウィジェットを画面の中央に表示していて、ウィジェット上の座標を正しく取得できない場合の対処方法をお話しします。
上の動画を見ていただくと、下図の赤点の座標が(0, 0)となっていないのがわかると思います。その原因は、ウィジェットのアスペクト比を保つことで、ウィンドウ画面に余白が生まれてしまうからです。
解決方法をお話していくにあたって最初に、ウィジェットとウィンドウのアスペクト比が異なり、画面に余白が生まれるとき、取得できる座標の範囲がどのようになるかをご説明いたします。
説明で使用する例では、ウィジェットのサイズは 1920 × 1080 とします。
上図のように余白が生まれたとき、ウィンドウ上で取得できる座標の範囲の大きさは、（緑線の長さ + 赤線の長さ）となります。つまり、上図の縦軸においては、余白が発生していないため、ウィジェットサイズである1080が取得できる座標の範囲の大きさとなり、横軸においては、（ 1920 + 余白サイズ ）が取得できる座標の範囲の大きさとなります。
余白が生まれてもウィンドウの左上端（上図の赤点）の座標が（0, 0）となるので、ウィジェットの左上端（緑点）の座標を（0, 0）としてマウスカーソルの位置を取得したい場合は、「Get Mouse Position on Viewport」ノードから取得した値から、（追加された余白のサイズ ÷ 2）の分だけ引く必要があります。
それでは、実際に下図のように「Get Mouse Position on Viewport」ノードから取得した値から、（追加された余白のサイズ ÷ 2）の分だけ引く処理のノードを組んでいきます。
今回の記事では、アスペクト比が一定となるウィジェットは、私が過去に書いた下の記事のウィジェットを用います。そのため、アスペクト比が一定となるウィジェットの構成は、下図のようになっているとします。
（「Canvas Panel」ウィジェットの「TestWidgetCanvas」の下にあるウィジェットが、一定のアスペクト比を保つようになっています。）
最初に、「TestWidgetCanvas」ウィジェットを選択し、詳細パネルの「Is Variable」にチェックを入れ、変数として扱えるようにします。後で、ウィジェットの縦横サイズを取得するのに使用します。
次に、マウスカーソルの座標を求める処理を記述したいイベントグラフを開き、下のノードを組みます。
（「Test Widget」は上で「TestWidgetCanvas」を変数として扱えるようにした、アスペクト比が一定となるウィジェットの変数です。）
求めた座標をウィンドウ左上にメッセージとして表示するようにして、余白が生まれているときも、マウスカーソルの座標がウィジェット上の座標を適切に取得できているかどうかを確認します。
（この記事で用いているウィジェットのサイズは、1922 × 1081 ですので、ウィジェット左上端の座標が (0, 0)、ウィジェット右下端の座標が (1922, 1081) となっていれば、正常にウィジェット上におけるマウスカーソルの位置を取得できているとわかります。）
3. ウィンドウ画面が小さいとき
サイズが 1920 × 1080 であるウィジェットを、画面サイズが 640 × 360 のウィンドウ（アスペクト比は 16 : 9）に表示している状態で、「Get Mouse Position on Viewport」ノードを使用してみると、ウィンドウの右下端の座標が、(1920, 1080)よりも小さくなっていると思います。
これは、Unreal Engineが管理しているDPIスケールの値が、デフォルトだと一定以下の値にはならないようになっているからです。
「Get Mouse Position on Viewport」でマウスカーソルの座標を取得する処理の中にも、DPIスケールの値が利用されているため、正常なDPIスケールの値を取得できる状態にないと、正しいマウスカーソルの座標を取得することができません。
なのでこれから、正常なDPIスケールの値を取得できるようにしていきます。
DPIスケールの値が正常な値になるようにするために、「プロジェクト設定」＞「DPIスケーリング」＞「DPIカーブ」を開きます。
「プロジェクト設定」＞「DPIスケーリング」＞「DPIカーブ」のグラフの、一番左端の点をクリックしてみると、下図の赤線のように「Scale」の値が表示されます。
上図では、一番左の点の「Scale」の値が 0.444 となっており、その点の左側の線が左下に下がっているのではなく、横に線が引かれている状態にあることから、DPIスケールの値が 0.444 未満になることがない状態になってしまっていることがわかります。
0.444 未満の値にもなるようにするために、「プロジェクト設定」＞「DPIスケーリング」＞「DPIカーブ」のグラフの、一番左端の点をクリックし、赤線の「Resolution」「Scale」の値を0に設定します。
これで、DPIスケールの値が 0.444 未満の値になるようになり、ウィンドウ画面が小さくても「Get Mouse Poistion on Viewport」ノードで、正しいマウスカーソルの座標を取得できるようになります。
以上で今回の記事の内容は終了です。
最後まで読んでいただき、ありがとうございました。