Unreal Engine Widget（ウィジェット）を用いたボタンの表示と操作方法

こんにちはTakumiです。

今回は、Widget（ウィジェット）を用いたボタンの表示と操作方法について紹介していきます。

ウィジェットはボタンの表示以外に画像やテキストの表示にも使用することができるので、ぜひ参考にしてみてください。

Widget（ウィジェット）を用いたボタンの表示方法

---

1．ボタンの作成

まずは、ファーストパーソンテンプレートでプロジェクトを作成してください。

プロジェクトを作成したらコンテンツブラウザ上で右クリックして表示されるタブの一番下にあるユーザインターフェイスの ウィジェットブループリントを選択してブループリントを作成してください。


ウィジェットブループリントを作成したら、名前を変更してください。ここではWidgetとしておきます。 

名前を変更したらウィジェットブループリントを開き、パレット内の一般にある Buttonドラッグアンドドロップしてボタンを表示させます。

ボタンを配置したら適当なサイズに変更してください。


ボタンを配置したら、詳細パネルのアンカーを選択して中央にします。


パレットの一般にあるTextをボタンの下にドラック＆ドロップしてTextをButtonの子要素にします。 

子要素にしたら、ボタンの名前を付けてどれが何のボタンなのかをわかりやすくします。

ここではPlayとPauseボタンとしておきます。


Textでボタン名を表示したら、階層内のボタンの名称をPlayとPauseに変更します。


ボタンの名称を変更したら、右上のグラフ を選択してイベントグラフに移動します。

移動したら、変数内にある先ほど作成したボタンを選択してOnClickedの+ボタンをクリックしてイベントを追加してください。


イベントを作成したらその先にPrint Stringを接続してください。

ここでは、PlayボタンがクリックされたらPlay、PauseボタンがクリックされたらPauseと表示されるようにしておきます。 

これでボタンが押されたらTextが表示されるようになりました。

コンテンツブラウザ上に新たにブループリントをActorで作成してください。


ここでは、ブループリント名をBP_Widgetとしておきます。


ブループリントを作成したら、ブループリントを開いてWidgetコンポーネントを追加してください。 

コンポーネントを作成したら 詳細パネル内のWidget Classを Noneから Widgetに変更してください。


以下のようにビューポート上に先ほど作成したボタンが表示されれば問題ありません。


エディタのトップに戻ってBP_Widgetをドラッグ＆ドロップしてマップ上に配置してください。

反対側からはボタンが見えないので、もしきちんと表示されていなければX軸を指定して180度回転させてください。

2．Widget Interactionの設定

続いて、ボタンの操作に必要となるWidget InteractionをFirstPersonCharacterに追加していきます。

FirstPersonCharacterのブループリントを開いてWidget Interactionコンポーネントを追加してください。


追加したら、ビューポートでWidget Interactionの位置を銃の先端に移動させます。


続いてWidget Interactionを用いた操作設定をしていきます。

まず、コンポーネントのWidget InteractionをCtrlキーを押しながらイベントグラフにドラッグ＆ドロップしてください。


ブループリントを以下のように作成してください。


このブループリントでは、ボタン上にカーソルがある時にマウスの左ボタンを押して離すことでWidgetのボタン操作を可能にしています。

設定が完了したらプレイしてみましょう。

Playボタンが選択された状態で左クリックしたらPlay、Pauseボタンが選択された状態で左クリックしたらPauseと表示されるはずです。

3．Imageボタンの作成

続いてImageボタン作成してみましょう。

まずは適当な画像をプロジェクトのコンテンツブラウザ上にドラッグ＆ドロップしてインポートしてください。


インポートしたら再び先ほどのウィジェットブループリントを編集していきます。

先ほど作成したボタンの子要素のTextを削除してButtonのみにしてください。


Textを削除したら画像をセットしていきます。

画像は詳細のアピアランス内のNormalにセットします。


セットしたらボタンが画像に変わりますが、今のままではきちんとボタンが表示されないので、 スロットのサイズXとサイズYを画像のサイズに合わせます。


サイズを合わせることで元の画像の状態で表示されるようになります。


しかし、今のままでは、ボタンにカーソルを合わせた時とクリックしたときに先ほどの灰色のボタンが表示されてしまうので、 HoveredとPressedにも画像をセットし、Tintで色を変えていきます。



これでカーソルを当てた時とクリックしたときにボタンの色が変化してボタンの操作が分かりやすくなります。

設定が完了したら実際にプレイしてみて確認してみてください。




Widgetは様々な使用方法があり、Textを用いた説明の表示や動的マテリアルを用いたタイマーの表示など、 ほかにも多くの活用方法があるので、いろいろ試して活用してみてください。