1. サイトトップ
  2. ブログ
  3. Unreal Engine
  4. 【UE4】カーソルの位置とウィジェットの座標系について

【UE4】カーソルの位置とウィジェットの座標系について

カテゴリー

タグ

投稿日：2021.7.28

更新日：2021.7.28

※UE4のバージョンは4.26.2を使用しました

こんにちは。
情熱開発部・プログラム課の日高です。

今回はUE4で取得出来るカーソルの座標系と、座標系の変換方法を紹介します。

UE4ではカーソルやウィジェットの計算をするときに、座標系の変換をすることがあるのですが、カーソル位置は取得方法によって座標系が異なります。
変換に使う関数もいくつかあるので、どうすれば目的の座標系までもっていくことができるのか分からなくなることが何度もありました。

なので、座標の変換で迷うことがなくなるように座標系と変換方法についてまとめてみました。

座標系について

最初に、今回使用する以下４つの座標系について説明します。

  • １）スクリーン座標
  • ２）クライアント座標
  • ３）ウィジェットのローカル座標
  • ４）ビューポート座標

１）スクリーン座標

ディスプレイの左上を原点とした座標。
UE4では「Absolute」「Platform」「Screen Space」等と記載されています。

２）クライアント座標

枠を除いたウィンドウの左上を原点とした座標です。

３）ウィジェットのローカル座標

ウィジェットの左上を原点とした座標系で、ボタンやキャンバスパネル等、すべてのウィジェットに存在しています。

４）ビューポート座標

「２）クライアント座標 」と範囲は同じですが、DPIScaleで割った座標系です。 （今回はDPIScaleに関しての説明は省きます。）
左上では共に（0, 0）になりますが、右下に行くにつれ差が広がります。

「２）クライアント座標」と「４）ビューポート座標」でのカーソル位置を表示して違いを確認してみました。

また、画面左上を原点にして設置したウィジェットもこの座標系になります。

座標系を変換する方法

４）ビューポート座標 へ変換する

確認用に全画面に表示されるキャンバスパネル（原点が画面左上なのでビューポートと同じ座標系になる）の左上にUE4のロゴを置き、ロゴがカーソルに追従するウィジェットを作成しました。

１）スクリーン座標　→　４）ビューポート座標

スクリーン座標からの変換では、ビューポートウィジェットのジオメトリでAbsoluteToLocal関数を通します。

AbsoluteToViewportでも変換できます。

２）クライアント座標　→　４）ビューポート座標

クライアント座標から変換する場合は、ViewportScaleで割るだけでOKです。

変換が成功すると以下の用にロゴがカーソルに追従するようになります。

３）ウィジェットのローカル座標へ変換する

確認用に画面中央にキャンバスパネル（LogoCanvas）を置き、その左上に設置したUE4のロゴがカーソルに追従するウィジェットを作成しました。

１）スクリーン座標　→　３）ウィジェットのローカル座標

スクリーン座標からの変換では、 変換先のウィジェット（LogoCanvas）のジオメトリでAbsoluteToLocalを行います。

２）クライアント座標　→　３）ウィジェットのローカル座標

クライアント座標からの変換では、 スクリーン座標を経由する必要があるため、以下の手順で変換します。

  1. ViewportScaleで割ってビューポート座標へ変換する
  2. ビューポートのジオメトリでLocalToAbsoluteを行い、スクリーン座標に変換する
  3. 変換先のウィジェット（LogoCanvas）のジオメトリでAbsoluteToLocalを行い、ウィジェットの ローカル座標へ変換する

４）ビューポート座標　→　３）ウィジェットのローカル座標

ビューポート 座標からの変換では、スクリーン座標を経由する必要があるため、以下の手順で変換します。

  1. ビューポートウィジェットのジオメトリでLocalToAbsoluteを行い、スクリーン座標に変換。
  2. 変換先のウィジェットのジオメトリでAbsoluteToLocalを行い、ウィジェットの ローカル座標へ変換

カーソル位置の取得方法とその座標系の紹介

カーソル位置 or タッチ操作の取得方法とその座標系をいくつか紹介します。

１）スクリーン座標が取れる関数

  • GetMousePositionOnPlatform
  • MouseEventのGetScreenSpacePosition

２）クライアント座標が取れる関数

  • PlayerControllerのGetMousePosition
  • InputTouchのLocation

４）ビューポート座標が取れる関数

  • GetMousePositionOnViewport

最後に

変換は関数を１つ、２つ通すだけでできてしまうので簡単ですね。
座標系が把握できれば変換で戸惑うこともなくなりそうです。

取得した値がどの座標系か分からない時は、GetMousePositionOnViewport等座標系が分かっている物と比較すると分かり易いと思います。

それでは。最後までご清覧頂きありがとうございました。

【免責事項】

本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。