内向型人間の知恵ブログ内向型人間の知恵ブログ悩みのタネが、ネタになる。広告の掲載を再開しました。Engineでメインメニューを実装する解説や動画を見ると、自分が考えているメニューとイメージしているものが違っていることに気がついた。大半は小規模のゲームやFPSで採用されるような、項目が少なく、ゲームが一時停止するようなものになっている。公式の出している解説もまさにそれ。ドキュメントメインメニューといえば、自分が想像していたのはRPGで画面全体が切り替わるもの。今回はPSO2やFF14のようなゲーム画面に重なるUIを目指している。(FF14ではメインコマンドと呼ばれている。メインコマンドの表示方法/表示変更タイトルメニューもポーズメニューもゲームや人によってはメインメニューと呼ばれていて、自分が作りたいものと違うものを指しているのが正直面倒くさかった。実装の流れコンテンツブラウザにフォルダを作成する作成したフォルダ内にウィジェットブループリントを作成するウィジェットを作成するキャラクターのブループリントでウィジェットの表示・非表示を実装する手順1:ウィジェットを作成する準備コンテンツブラウザ(画面下)で、コンテンツの下の階層にウィジェットを保存するフォルダを作成する。フォルダ名はWidgetにした。作成したWidgetフォルダ内で、右クリックメニュー>ユーザーインターフェイス>ウィジェットブループリントを選択(Fig1)。名前はMainMenuにした。ウィジェットブループリントをダブルクリックすると別ウィンドウでウィジェットの編集ができる。Panelを配置する。配置してある場合、フルHD(1920×1080)のサイズ1280×720ピクセルで白の点線が表示される(※1)。(※1)解説では白の点線または緑色の枠線が表示されたスクリーンショットを見ることがあると思うが、自分の場合はそれがなかった。Panelがなかったことに気づいて解決した(Fig2)。Panelを配置する。Panelは規則正しく要素を配置することができるらしい。タテ1列やヨコ1列のメニューだと出番はないが、今回はタテもヨコも複数列の配置なので使うことになった。トンコツ開発ブログ出番が少ないせいか、解説がほとんど無い。そのため当たって砕けろの精神で使ってみる他なかった。Panelで指定することになる。今回作りたいのはボタン一つがタテ70px、ヨコ140px。Panelの大きさはタテ140px、ヨコ700pxになる。Panelの配置は画面下の中央にしたい。メダルの模様みたいなアンカーを動かすが、座標はともかく、解像度の変更に対応する方法は分かってない。Panelの下の階層にボタンを10個配置。名前を0~9までつけてみた。このままではボタンは同じ位置に重なってしまっているので、座標を指定する。Slot)の項目がある。RowとColumnの値が配列番号(座標?)になっており、左から右・上から下に向かって数字が大きくなる。左下のボタンは(1,0)、右下のボタンは(1,4)になる(Fig3)。UniformGridPanelにボタンを配置このままではボタンが小さいままなので、割り当てた領域を埋めてもらいたい。Alignmentをそれぞれ幅・高さいっぱいになるようにする(Fig4)。(これは海外ニキがフォーラムで自己解決したページで発見した。Forumsボタンの色・透明度は画面右のアピアランス>Normal>Tintで変更できる。マウスカーソルが乗った場合の色はアピアランス>Hovered>Tintの設定が反映される。(Tintは「色合い」の意。ボタンのサイズと色の変更ちなみに、全部のボタンを一括で設定する方法はある。公式のチュートリアルにもあるように、Ctrlキーで複数選択すれば一括で色を変更できるようになる。テキストはボタンの下の階層に置く。フォントはデフォルトのRoboto。