[UMG]マウス入力を阻害する-後編-

今回は、前回の続きです。
前回は、Visibleなウィジェットを配置すると、それより後ろにあるウィジェットはカーソルとインタラクティブできないという内容について紹介しました。

実は、前回紹介した内容では、カーソルとのインタラクティブを完全に阻害できない例外があります。それが、アクターがクリックされたことを検出する「ActorOnClicked」イベントです。

ActorOnClicked イベントの作り方

はじめに、ActorOnClickedイベントでクリック入力を受け取るところまで紹介します。

まず、図1のように、PlayerControllerの「EnableClickEvents」を有効にします。

図1 PlayerControllerの設定を有効にする

次に、クリックしたいアクターのコリジョンを確認します。コリジョンが有効でないと、ActorOnClickedは発生しません。図2はデフォルトのままですが、NoCollisionになっていなければ、とりあえず大丈夫かと思います。

図2 Collisionが有効か確認する

最後に、図3のようにイベントグラフ上にActorOnClickedノードを追加すれば、アクターをクリックした時の処理を追加できるようになりました。このアクターをクリックすると、Helloと画面に出力されるようになります。

図3 ActorOnClickedノードを実装する

さて、これでアクターがクリック入力を受け取れるようになりましたが、これは前回のUMGによる手法では阻害できず、ActorOnClickedが実行されてしまいます。

今回に限っては、Branchで処理をはじく、Collisionを無効化する、EnableClickEventsをFalseにする等の方法が考えられます。ですが、それらの方法ではなくUMGによって阻害する方法を紹介します。

Buttonによって入力を阻害する

前回のSpacerのように、マウス入力を阻害するウィジェットとしてButtonを配置します。今回はどんなウィジェットでも良いわけではなく、Buttonでなければなりません。また、図4の右端のように、Buttonの前面をVisibleなウィジェット（図4ではBackgroundBlur）で覆うようなレイアウトは駄目です。

図4 Buttonを配置する

このままではButtonが見えてしまっているので、Spacerなどと同様に不可視にするため、Buttonの見た目を変更します。図5のように、次の項目を設定します。

• 画面全体に広げる（設定は親パネル次第、もしくはルートウィジェットにする）
• ButtonのStyleのDrawAsをNoneに設定する
• ButtonのStyleのPaddingを0に設定する

図5 Buttonの見た目を変更する

これで、このボタンの背後にあるアクターをクリックしても、ActorOnClickedが発生しなくなります。

このテクニックも、UE4ぷちコンに応募した作品で使用しました。ゲームでは「チェスの駒をクリックすると、その駒をフォーカスする」という処理をActorOnClickedで実装しています。基本的に、駒をフォーカスできるかどうかはゲームの進行状況を表すステートで管理していますが、ステートと関係のないダイアログが突然現れた場合でも、駒のフォーカス処理は正しく動作する必要があります。そのようなとき、ダイアログ自身がActorOnClickedを許可するかどうか決められるような方法があれば、ActorとUserWidgetの依存度を下げることができます。

特に過剰に宣伝する必要性は無いわけですが、今回はUMGまわりを頑張っているので、そこに注目して見てもらえると嬉しいなと思ったり思わなかったり……

この記事は次のバージョンで作成されました。

Unreal Editor(4.15.1-3348071+++UE4+Release-4.15)