UI Navigation 3.0

マウス、キーボード、ゲームパッドでナビゲート可能なUMGメニューを比較的簡単に構築できるプラグインのチュートリアルです。

Basic Setup

マーケットプレイスでダウンロード

UI Navigation 3.0はマーケットプレイスで入手できます。無料です。
UI Navigation 3.0：コードプラグイン – UE マーケットプレイス

プラグインの導入

編集 > プラグインからUI Navigationを検索してチェックを入れて再起動。

編集 > プロジェクト設定 > エンジン > ユーザー インターフェースのフォーカス > ファーカスレンダリングルールを「なし(Never)」にしてください。

セットアップ

コンテンツブラウザの設定で「エンジンのコンテンツを表示」「プラグインのコンテンツを表示」にチェックを入れる。
エンジン > Plugins > UI Navigation コンテンツがあります。
右クリックして「お気に入りに追加」を設定しておくとアクセスが楽になります。

ウィジェットブループリントの作成と編集

コンテンツブラウザで右クリックしてユーザーインターフェース > ウィジェットブループリントを選択。親クラスはUser Widget。
名前はW_MyComponentにしました。

同じ手順でもう1つ作成し、名前をW_MyWidgetにしました。

W_MyComponentの編集

W_MyComponentを開く。
ファイル > ブループリントの親を変更 > UINavComponentを選択。
コンパイル結果で「必須のウィジェット バインディング”*****”が見つかりません」というエラーが複数出ます。これらを配置すれば良いだけです。
パレット > 一般 > Buttonを階層に配置、名前をNavButtonにします。
パレット > 一般 > Textを階層のButtonの子に配置、名前をNavTextにします。
これでコンパイルするとエラーが消えます。

W_MyWidgetの編集

W_MyWidgetを開く。
ファイル > ブループリントの親を変更 > UINavWidgetを選択。
こちらはエラーなくコンパイルできます。

W_MyComponentの編集

階層の[W_MyComponent]を選択した状態で、詳細の一番上のカテゴリ欄にCommonと入力してEnterキーを押す。コンパイルもしておきます。

W_MyWidgetの編集

パレット > パネル > Canvas Panelを階層の[W_MyWidget]の子に配置。
パレット > パネル > Vertical Boxを階層の[Canvas Panel]の子に配置。
詳細のアンカーを中央(5)にして、位置Xと位置Yは0、サイズXは500、サイズYは600、AlignmentはXもYも0.5。
COMMON > W My Componentを階層の[Vertical Box]の子に配置。それを複製して3つに増やす。

複製した3つのW My Component_*を選択した状態で詳細のスロット > Size > フィルをクリックするとVertical Boxの中で均等のサイズになります。
3つのW My Component_*のUINav Component > Component TextをそれぞれOption 1～Option 3に変えます。

プレイヤーコントローラーの作成と編集

コンテンツブラウザで右クリックしてブループリント クラスを選択。
親クラスはPlayer Controller。
名前はBP_MyPlayerControllerにしました。

BP_MyPlayerControllerの編集

BP_MyPlayerControllerを開く。
ファイル > ブループリントの親を変更 > UINavControllerを選択。
エラーなくコンパイルできます。

クラス設定 > 詳細 > インターフェース > 継承インターフェースにUINavPCReceiverが入っているのを確認。もし入っていなければ実装インターフェースを追加し、UINavPCReceiverを選択。

イベントグラフを開く。

ノードを組む。

イベント BeginPlayから線を伸ばしてウィジェットを作成を配置。その中のClassはW_MyWidgetを選択。Owning Playerから線を伸ばしてSelfを配置。Return Valueから線を伸ばしてAdd to Viewportを配置。
公式のチュートリアルに沿ってイベント BeginPlayから繋いでいます。
実際にゲームで使用する時は、インプットアクションから呼び出した方が良いでしょう。
ノードを組む

空いているところで右クリックしてイベント On Root Widget Addedとイベント On Root Widget Removedを配置。
イベント On Root Widget Addedから線を伸ばしてSet Show Mouse Cursorを配置して枠のチェックを入れる。
Set Show Mouse Cursorから線を伸ばしてSet Input Mode Game And UIを配置。その中のPlayer Controllerから線を伸ばしてSelfを配置。
イベント On Root Widget Removedから線を伸ばしてSet Show Mouse Cursorを配置して枠のチェックを外す。
Set Show Mouse Cursorから線を伸ばしてSet Input Mode Game Onlyを配置。その中のPlayer Controllerから線を伸ばしてSelfを配置。

プロジェクト設定

編集 > プロジェクト設定 > マップ&モード > Default Modes > 選択したゲームモード > Player Controller ClassをBP_MyPlayerControllerに変更してください。

この状態でコンパイルしてテストプレイをすると、Option 1～3までがマウスとゲームパッドで選択可能になっています。
左クリック、Space、Enter、ゲームパッドAで決定。
TabキーやゲームパッドBでメニューを閉じることができます。

Navigation Settings

この項目では、ボタンの左にセレクターを配置と、選択中のボタンにアニメーションさせます。
入力の設定やゲームパッドのサムスティックでマウスカーソルを動かす設定も解説しています。

W_MyWidgetの編集

W_MyWidgetを開く。
イベントグラフを開き、デフォルトのノードは削除します。
左メニューの関数オーバーライドでGet Initial Focus Componentを選択。
変数のW_MyComponent_2をGetしてReturn Valueに繋げる。
これでテストプレイすると最初に選択されているボタンがOption 3になります。

W_MyComponentの編集

W_MyComponentを開く。
イベントグラフ > クラスのデフォルト > 詳細でUINav Component > Use Text Colorにチェックを入れると、テキストのデフォルトの色と選択中の色をそれぞれ変更可能になります。

ウィジェットブループリントの作成と編集

コンテンツブラウザで右クリックしてユーザーインターフェース > ウィジェットブループリントを選択。親クラスはUser Widget。
名前はW_MySelectorにしました。

W_MySelectorの編集

W_MySelectorを開く。
パレット > 一般 > Imageを階層の[W_MySelector]の子に配置。その詳細のアピアランス > Brush > Imageでセレクター用の画像を選択。AnalogHatという画像がエンジンに入っていました。
コンパイルしておきます。

W_MyWidgetの編集

W_MyWidgetを開き、デザイナーを開く。
パレット > ユーザーが作成 > W My Selectorを[Canvas Panel]の子に配置。
名前をTheSelectorに変更。
サイズXとYを60にして正方形にしましょう。

イベントグラフを開く。
クラスのデフォルト > UINavigation Selector > Selector PositioningをLeftにする。これはボタンの左にセレクターを配置するものです。
その下のSelector OffsetをX-50.0、Y0.0にする。Xが0だとセレクターとボタンが重なってしまいます。

この状態でテストプレイをするとセレクターが正常に動作しました。

W_MyComponentの編集

W_MyComponentを開いて、デザイナーを開く。
左下メニューのアニメーションをクリック。
+アニメーションをクリックして名前をComponentAnimationにします。

NavTextを選択した状態で左下メニューのアニメーション > ComponentAnimationを選択。
+トラックをクリックしてNavTextを選択。
トラックに追加されたNavTextの右の+をクリックしてTransformを選択。
トラックに追加されたTransformの▲をクリックして開く。
変換の▲をクリックして開く。
Xの右にある+をクリックし、タイムラインを0.50に移動させて、Xの値に50.0と入力してからXの右にある+をクリック
X0の位置から0.5秒後にX50の位置に移動しているというアニメーションです。

コンパイルしてテストプレイをすると、選択されているOptionが少し右に動きます。

インプット設定

コンテンツブラウザのエンジン > Plugins > UI Navigation コンテンツ > InputにIC_UINavがあります。

IC_UINavを開き、マッピング > Mappingsでインプットの設定変更が可能です。

マウスカーソルをゲームパッドのスティックで操作させる

BP_MyPlayerControllerの編集

BP_MyPlayerControllerを開く。
コンポーネントのUINav PCCompを選択して、詳細 > UINav Controller > Use Thumbstick as MouseをLeft Thumbstickにすれば左スティックでマウスカーソルが操作できます。
その下のThumbstick Cursor Sensitivityで感度の設定ができます。

この設定はPlayerControllerの設定ですから、UI Navigationを使用せずに作成したウィジェットの操作にも反映されます。

この場合、左スティックによる各ボタンの選択は無効になります。
左スティックでマウスカーソルを操作して、Aボタンでクリックというのが標準操作になります。

UINavWidget events

W_MyWidgetの複製

W_MyWidgetを複製して名前をW_MyWidget2にします。

W_MyWidget2の編集

W_MyWidgetを開き、デザイナーを開く。
[Vertical Box]を右側に移動させます。位置Xを550にしました。
少し小さくします。サイズX400、サイズY500にしました。

3つのW MyComponent_*のComponent TextをOption 4～6に変更します。

W_MyWidgetの編集

W_MyWidgetを開き、イベントグラフを開く。

ノードを組む

イベント On Selectを配置して線を伸ばしてGo To Widgetを配置。その中のNew Widget ClassにW_MyWidget2を選択。Remove Parentにチェックを入れる。

この状態でテストプレイをすると、Option 1～3のどれでもクリックすると、Option 4～6が開き、TabキーやゲームパッドBを押すとOption 1～3に戻ります。

Navigation Rules

W_MyWidgetの編集

デザイナーを開く。

[Vertical Box]を複製し、名前はVertical Box_2としておきます。
[Vertical Box]のAlignmentを1.5と0.6にする。
[Vertical Box_2]の位置XとYを0にして、Alignmentを-0.5と0.4にする。

[Vertical Box_2]のTextのOption 1～3をOption A～Cに変更します。

テストプレイをするとOption 1で右キーを入力するとOption Aへ。Option Aで左キーを入力するとOption 2へ移動します。
ジグザグに下りていく。

ナビゲーション：ラップ

[Vertical Box]を選択し、詳細 > ナビゲーションの上と下をラップにする。

テストプレイをすると、Option 3を選択した状態で下キーを入力するとOption 1に飛びますし、Option 1で上キーを入力するとOption 3に飛びます。

ナビゲーション：カスタム

[Vertical Box]を選択し、詳細 > ナビゲーションの右をカスタムにして+関数を作成をクリック。

ノードを組む

Navigationから線を伸ばしてイコール(列挙型)を配置。
変数W_MyComponent_3をGetして、Return Valueに繋ぐ。

テストプレイすると、左側のボタンで右キーを入力すると、必ずOption A(W_MyComponent_3)に飛びます。

UINavComponents

W_MyComponentの編集

デザイナーを開く。

ノードを組む

イベント On Navigated Toから線を伸ばしてPrint Stringを配置。
In Stringから線を伸ばしてAppendを配置。
Aから線を伸ばしてGet Display Nameを配置し、ObjectはSelfを繋ぐ。
Bには適当な文字を入力。

テストプレイすると、選択されているボタン名がPrint Stringによって表示されます。つまりイベント On Navigated Toは、ボタン選択中に発生するイベントです。
例えばインベントリで使用すれば、選択中のアイテムの説明が出せそうです。

W_MyWidgetの編集

イベントグラフ

関数のDo CustomNavigationを削除してください。

デザイナー

[Vertical Box]の詳細 > ナビゲーション > 右をカスタムからEscに戻す。
[Vertical Box_2]を削除する。

パレット > ユーザーが作成 > Option Boxをドラッグ&ドロップで配置。
サイズXを480、Yを120にしておきます。
パレット > ユーザーが作成 > Slider Boxをドラッグ&ドロップで配置。
サイズXを600、Yを100にしておきます。
※公式チュートリアルではSliderを使用していますが、私はSliderは不具合があって使えませんでした。

Option Boxを選択し、詳細 > UINav Oprion Box > Use Number Rangeのチェックを外す。
その下のString Optionsを3つ+して、それぞれYes、No、Maybeと入力。

テストプレイをすると、
Yes > < No > < Maybe
という切り替えられるメニューが出現します。

Slider Boxは詳細 > UINav Component BoxのMin RangeとMax Rangeが最小値と最大値。
Intervalが1回のキー入力で変動する値。

詳細のIs Variableにチェックを入れて変数にすれば、このスライダーの値をフレームレートの設定等に使えそうです。

Prompt Widgets

UINavPromptWidgetの作成と編集

コンテンツブラウザで右クリックしてユーザーインターフェース > ウィジェットブループリントを選択。
親はUINavPromptWidget。
名前はW_MyPromptにしました。

W_MyPromptの編集

パレット > パネル > Canvas Panelを配置。

パレット > COMMON > W My Componentを配置。
W My ComponentのサイズXを300、Yを100にして複製。
Component TaxtをNoとYesにする。

パレット > 一般 > Textを2つ配置。
名前をTitleTextとMessageTextにする。

W_MyWidgetの編集

ノードを組む

イベント On Selectから線を伸ばしてGo To Prompt Widgetを配置。その中のTitleとMessageを適当に記入。New Widget ClassにはW My Promptを選択。
Eventから線を伸ばしてカスタムイベントを追加。名前はOnMyPromptにしました。その中のPrompt Dataから線を伸ばしてCast To PromptDataBinaryを配置。
Cast To PromptDataBinaryを右クリックして純粋キャストに変更。
As Prompt Data Binaryから線を伸ばしてAccept を取得。
Acceptから線を伸ばしてブランチを配置し、OnMyPromptからも繋ぐ。
ブランチのTrueとFalesから線を伸ばしてPrint Stringを配置し、違いがわかるようにIn Stringを入力。
テストプレイをすると、Optionをクリックした時にNo or Yesの選択が出ます。

Go To Prompt WidgetのRemove Parentにチェックを入れていると、No or Yesの選択が出ている状態でOption 1～3が非表示になります。

Input Rebinding

キーコンフィグができるようですが、テストプレイをしたらエラーで落ちちゃいました。

コメント

タイトルとURLをコピーしました