Unreal Engine 5で開発する過程で、処理が実行される順序で少しハマったパネル内のスロットの順序を調整する［ZOrder］設定を備忘録的に投稿します。
パネル内スロットのZOrder設定
Unreal Engineのウィジェット内でパネルを使って他のウィジェットを追加する方法があります。
今回も、ゲームで使われるインベントリのような仕組みを作っている時にハマりました。
こんな感じで、インベントリの処理でアイテムをドラッグして移動中に、別のアイテムと重なった時の処理で、ドロップ時に別のアイテムの処理が発火してしまう現象があります。
色々調べてみると、マウスのクリックイベントなどで実行される処理のウィジェットが重なり合っている場合、マウスポインターに一番近いウィジェットが実行されるみたいです。
つまり、上の画像の場合、「緑」と「赤」のウィジェットが重なっている場合には「緑」が実行されるという仕様のようです。
例えば、インベントリでよくある操作でアイテムをドラッグしてグリッドを移動させるような場合に、他のウィジェットと重なり下側になった状態でドロップ（つまりマウスボタンを離す）操作をした場合に、上側のイベントが実行されるという不思議な処理なってしまいます。
パネルのスロットに追加したウィジェットの重なりは［ZOrder］設定で調整できます。HTMLの［z-index］と同じ感じですが、［ZOrder］の場合は数値が大きい方が前面にくるようです。
アクセス方法は［Slot as Canvas Slot］経由で［Set ZOrder］ノードで設定が可能です。
まとめ
今回は、短い記事ですが、Unreal Engine 5でパネルのスロットに追加されたウィジェットの表示順序（前面や背面）を変更する［ZOrder］設定について書きました。
マウスのクリックイベントなどはウィジェットが重なった場合に、前面のウィジェットが実行されるために、確実に実行する場合には最前面になるように調整しておく必要があります。
Unreal Engine でウィジェットが重なった場合に処理されるイベントを調整したい人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。