【UE5】Add to Viewport の ZOrder にハマったというお話

皆様、こんばんは！

先日から UI(Widget)周りを触っているのですが、タイトル通り「Add to Viewport」の ZOrder でハマってた時のお話になります。

「Add to Viewport」は、「Create Widget(ウィジェットを作成)」で指定した Widget を画面上に表示する時に利用する関数です。

今回ハマった問題ですが、表示した Widget のボタンが昨日まで反応してたのに何かを実装してから反応しなくなったというものでした。
しかも別 Widget で作成したインベントリの方も同じ症状が発生しました。
(ButtonWidget の On Hovered や On Clicked が効かない症状です)

ZOrder は描画順(優先順位)で、数値が大きい程手前に描画されます。
デフォルトで ZOrder は 0 に指定されており、特に意識しなければ後から「Add to Viewport」したものが手前に描画されていきます。

例えば WidgetA を作成し、画面の真ん中にボタンを配置しただけの Widget を作成します。

更に WidgetB を作成し、Border を画面全体に入れておきます。

「CreateWidget」で WidgetA、WidgetB を作成しておき、WidgetA→ ＷidgetB の順で「Add to Viewport」をすると WidgetA のボタンは反応しません。

後で「Add to Viewport」した WidgetB(画面全体の Border) が手前に来ているため、後ろのボタンが触れないようになっているということになります。

そのため、WidgetA を後で「Add to Viewport」するか、WidgetA の ZOrder を WidgetB より高くしておけばこの問題は解決です。

なんだそれだけ...なことなんですが、実はもう一個気づけなかった理由があります。

私のプロジェクトで一部の Widget のみ「Add to Viewport」した後、「Set Visibility」を使って Visible/Collapsed で表示を切り替えていたものがあったんですが、Collapsed になっている Widget が悪さをしているということが分かりました。
(この Widget が画面大半を占める Border を配置しているものでした)

Collapsed で非表示にしていたので、それが邪魔をしているのに暫く気づけませんでした。「Remove from Parent」をしなければ画面上に表示されていなくても ZOrder の影響を受けるということを知れて大変勉強になりました。

この問題に遭遇し、今まで他の Widget に干渉するような画面配置をしたことがなかったんだと思いました。
たまたま被らないような配置になってたということになりますね...

それではまた！