【Unreal Engine_7】ポップアップメニューの実装

先月のブログでいったん終了したUE5によるデザインレビューツールの製作ですが、番外編ということでcommonUI機能を使ったポップアップメニューを実装してみました。

マウスの右クリックでカーソルを中心にメニューを表示させ、そのままドラッグでカーソルが移動し、右クリックを離すとカーソルの位置にあるボタンが実行されるという仕組みです。

某社製のCAD製品に似たようなものが実装されていますが、ヘビーユーザーにとって無くてはならない機能ですので、ぜひチャレンジしてみてください。

ここではあくまでも作り方の紹介にとどめていますので、commonUI自体の詳細な説明は別途、検索をお願いします。

・前回のブログで完成させた状態からスタートします。

・これまでに作成したブループリントは上の図のような感じです。Content Browserのフォルダ内で右クリック→ブループリントを選択し、新規でブループリントを作ります。

・クラスはCommonButtonBaseを選択します。この機能を使う場合、プラグインが必要になるので見つからない場合はインストールをしてみてください。

・新しくアイコンが追加されました。ちなみに、ポップアップメニューに表示させるボタンの数だけ作成するので、識別しやすいようにリネームしておきます。今回は色の変更につかうので、CommonUI_Button_Colorという名前にしました。

・作成したブループリントを開き、Canvas Panel、Vertical Box、Textをセットしてボタンの基礎部分を作ります。

・テキストのPadding項目はFill、文字サイズは12にセットしました。

・終わったら、Hierarchyタブの最上部を選択した状態で、Details欄のStyle項目にある＋ボタンをクリックします。

・保存場所を選択してSaveボタンをクリックします。

・保存と同時に、新規で新しくタブが生成されます。これがボタンのデザインを実装する画面になります。

・今回修正するのはNormal項目の中にあるNomal BaseとNormal Hoveredの二つです。Normal Baseが通常の表示、Normal Hoveredがマウスカーソルがボタンの枠内に入った時の表示を指します。

・まずはNormal Baseの部分をセットしていきます。

・ボタン表面の色はTintでRGBをそれぞれ0.7に設定。

・Draw AsでRounded Boxを指定。

・角RはCorner Radiiで10.0を指定。

・ボタンエッジ部の色はOutlineでRGBを0.2、0.2、1.0を指定し、線幅を1.5に指定。

・Rounding TypeはFixed Radiusを指定。

・続いてNormal Hoveredの設定。

・こちらはボタンのエッジ部の指定は無いので、ボタン表面の色と角Rの指定のみです。

・ここまで終わったら忘れずに上書き保存します。

・元の画面に戻り、その他の必要なボタンをコピペで作成していきます。今回は環境の変更と特に使用しないブランク用の二つを追加でコピペしました。

・環境変更ボタンのウィジェットを開き、テキストを変更します。Styleの項目に、先ほど製作したButtonStyleがセットされていることを確認します。無ければ選択しておきます。

・ブランク用のボタンも同様です。

・次に、実際のポップアップメニュー用の構成を作っていきます。

・Content Browser内で右クリック → User Interface → Widget BluePrintとたどりウィジェットブループリントを作成します。名前はPopup_Widgetとしました。

・Popup_Widgetを開き、これまで作成したcommonUIのボタンを配置していきます。

・Details欄のAnchorsとAlignment項目を調整して配置していきます。

・ボタンの配置が終わったら、フェードアニメーションを作成します。

・アニメーションの再生時間は0.1sにして、すべてのボタンに透明度の変化を設定します。

・続いて動作部分の作成に移ります。

・今回、動作を設定するマテリアル変更と環境変更のボタンでDetails欄のEvents項目にあるOn Button Base HoveredとOn Button Base Unhovered横のプラスボタンをクリックします。

・Graph画面にうつり、イベントノードの後ろにBoolean変数をセットします。マウスカーソルがボタンにホバーしているかどうかを判別するためのものです。ホバー中がTrue、非ホバー時がFalseになります。

・続いてアニメーションの設定に移ります。

・変数は新たに二つ用意します。ポップアップメニューが動作中か否かを判別するためのブーリアン変数と、マウスカーソルの座標値を格納するためのVector2D型変数です。

・Appearance側はアニメーションが逆再生になるのでReverseをセットします。

・続いて、Persistentレベルのブループリントを開きます。

・BeginPlay後ろのSequence末尾にピンを追加し、ノードを組んでいきます。

・マウス右クリックを検知したらAdd to ViewPortで画面表示、フェードアニメーションと続き、マウスの設定をLock On Captureに切り替えます。

・右クリックのリリースを検知したら、そのときボタンのホバー中かどうかで判別し、ホバーで無ければマウスの設定をDo not Lockに切り替えウィジェットを削除する(ポップアップメニューを消去する)という流れです。

・一度、この時点でポップアップメニューが表示されるか実際に確認しておくと上の図のような感じです。ウサギの頭の上に八個の楕円型ボタンが表示されています。

・続いて、ウサギのマテリアル変更の動作を組んでいきます。上の図のTrueから後ろの部分です。

・動作自体は以前のブログで作成済みのボタンウィジェットを押したときと共通なので、Sequenceノードの入力口に共通で差し込めばOKです。

・ただこのままだとポップアップメニューが消えずに残ってしまうので、Sequenceノードの0番目を挿入してフェードアニメーションとウィジェット消去の機能を組み込みます。

・環境の切り替えは上の図の位置からつないでいきます。

・こちらも先ほどと同じく、Sequenceノードを追加して入力を共通で差し込みます。

・ただし、既に作成済のLoading Widgetを除去するRemove from Parentノードが存在するため、このノードが二つ存在すると誤作動を起こすので、回避策としてポップアップメニューの位置を画面の外に置くことにしてみました。このあたりの設定は今後、改善できたらと思います。

以上で作業は完了です。