[UMG]カーソル入力を阻害する-前編-

はじめに

今回は、UMGのテクニックを紹介しようと思います。
図1を見てください。Open Dialogボタンをクリックすると、図2のようなダイアログが表示されます。
図1 Open Dialogボタン(右下:UI_IC_HUDのレイアウト階層)

図2 ダイアログの表示(右下:UI_IC_Dialogのレイアウト階層)

このダイアログシステムには、ダイアログ表示中にOpen Dialogボタンを再クリックできてしまうという問題があります。
Open Dialogボタンを再クリックさせないための方法はいくつかあります。はじめに思いつくのは、Open Dialogボタンがクリックされたとき、ボタンのVisibilityをHit Test Invisibleに変更して、クリック不能にする方法です。しかし、この方法はHUDに新しいボタンが追加されるたびに、それぞれのボタンのVisibilityを変更しなければならず、あまり良い設計とはいえません。

カーソル入力を阻害する

これを解決するために、ダイアログの後ろにカーソル入力を阻害するウィジェットを配置する方法で、再クリックさせないようにします。ウィジェットは何でもいいのですが、今回は見た目のないSpacerを使います。まず、図3のように、ダイアログの後ろにSpacerを配置します。
図3 Spacerをダイアログの背後に設置する(左:追加前、右:追加後)

次に、図4のように、VisibilityをVisibleに変更し、配置したSpacerを画面全体に広げます。画面全体に広げるのは、Spacerより背後にある全てのウィジェットを覆い、その全てのウィジェットのカーソル入力を阻害するためです。今回はSpacerの親がOverlayなので、AlignmentをFillに設定すれば画面全体に広げられます。親がCanvas Panel等の場合は、別途Anchors等を変更する必要があります。これだけで、Spacerより後ろにあるボタン{1}とのインタラクティブが阻害され、Open Dialogボタンは再クリックできなくなります。
図4 画面全体に広げて、VisibilityをVisibleにする

何故カーソル入力が阻害されるか

次の表はVisibilityによる違いをまとめたものです。Visibleだけが背後のウィジェットとのインタラクティブを阻害するという特徴をもっていることがわかります。前にSpacerをVisibleに変更したのは、Spacerが遮る背後のウィジェット(ここでは、Open Dialogボタン)とのインタラクティブを打ち切るためだったわけです。
また、「ウィジェットは何でもいい」と書きましたが、これはVisibleに変更さえすればウィジェットの種類は問わない、という意味です。今回は汎用性を考慮してSpacerを使いましたが、最近のバージョンではBackgroundBlurというものがあるので、Spacerの代わりにそちらを使うと見栄えが良いかもしれません。

図5 Collapsedに変更した時

図6 Hiddenに変更した時

図7 Spacerの代わりにBackgroundBlurを使う

おわりに

このテクニックは汎用性が高く、例えば最前面にVisibleなウィジェットを配置すれば、全てのウィジェットの入力を打ち切ることも可能です。ウィジェットアニメーション中などの一時的に入力を打ち切りたい場面で便利な手法です。
また、このテクニックはUE4ぷちコンに応募した私の作品でも使っています。実際にどのような場面で使用されているのか確認したい方は、次の動画を見てみてください。少しわかりにくいですが、ダイアログが出た瞬間、左上のボタンからのフォーカスが途切れ、カーソル入力が打ち切られる瞬間が確認できます。




{1} ダイアログがボタンより前になるかはAdd to ViewportノードのZOrderの値によります。ZOrderを変更しない場合、後にAdd to ViewportされたUser Widgetが前にきます。ダイアログをAdd to Viewportする順序によらず前面に配置したい場合は、予めZOrderを他のUser Widgetより高くする必要があります


この記事は次のバージョンで作成されました。
Unreal Editor(4.15.1-3348071+++UE4+Release-4.15)

コメント