72.メニュー画面を作る①実践
😺では今回はUI実践編として簡単にメニュー画面を作っていきます。今まで解説してきたText,Button,ImageやVerticalBoxなどのウィジェットをフル活用していきます。
なお今回のメニュー画面作成チュートリアルは長いため3ページに渡っており、1ページ目がメニュ―画面作成、2,3ページ目がそれぞれのボタンを押した時の処理作成といった形になっています。
今回実装するメニュー画面↓
https://youtu.be/lTTqwwdXevM
このページで作るもの↓(メニュー画面のUIの見た目の部分のみ)
https://scrapbox.io/files/65cbd1dab931ef00235c0b03.gif
という事でまずはメニュー画面のUIから作っていきましょう！
①メニュー画面の見た目を作成する|実践
まずはメニュー画面の見た目の部分を作成していきましょう。また確認ですがUnrealEngineのバージョンは5.0.3を使用していきます。
今回はスターターコンテンツを含めたサードパーソンのテンプレートを使用して作成していきます。
https://scrapbox.io/files/65cbd1f5c4ed390025c223c9.jpg
サードパーソンテンプレートが開かれました。
https://scrapbox.io/files/65cbd1fef678350026502628.jpg
まずはUIという名前のフォルダを作成します > そこで右クリック > ユーザーインターフェース > ウィジェットブループリント > (UserWidgetを選択) > 名前をWBP_Menuにします。
https://scrapbox.io/files/65cbd208b310340025c27abf.jpg
開いてCanvasとVerticalBoxを追加します。
https://scrapbox.io/files/65cbd216a39d9b0025483e19.jpg
VerticalBoxとは？
VerticalBoxは縦一列にウィジェットを配列させてまとめておくためのウィジェットです。
VerticalBoxの名前をF2キーでMenu_VerticalBoxに変更します。
https://scrapbox.io/files/65cbd233673fe9002538ebf1.jpg
😺UIはわかりやすくなるように名前を付けておく事をおすすめします。特に後からIsVariableによって変数化するUIには名前をつけておきましょう。何のUIの変数なのか判別できるようにする必要があるためです。今回は必要最低限のUIに命名していきます。
VerticalBoxのアンカーを中央に固定します。
https://scrapbox.io/files/65cbd24df164330024cd4eee.jpg
以下の画像の様にスロットのxとyの位置を0にして、サイズをxが1100でyが700、Alignment(アンカーの位置に合わせる項目)を0.5ずつにします。
https://scrapbox.io/files/65cbd257a39d9b0025483e6f.jpghttps://scrapbox.io/files/65cbd257a39d9b0025483e6f.jpg
😺ではVerticalBoxはセットできたのでVerTicalBoxの中にゲームタイトルとボタンを配置していきましょう。
TextをVerticalBox下に追加して名前をGameTitle_Textにします。
https://scrapbox.io/files/65cbd26ca055160026ec091d.jpg
コンテンツのTextに「ACTION GAME」と入力します。HorizontalAligmmentを真ん中にします。
https://scrapbox.io/files/65cbd27928a88f0025a47e56.jpg
現在こんな感じのウィジェット構造になっています。
https://scrapbox.io/files/65cbd286a08c19002e79dce6.jpg
次にボタンを配置していきます。ScaleBoxとButton,Textを以下のように追加していきます。
https://scrapbox.io/files/65cbd29027c7bd0026aa8982.jpg
ScaleBoxとは？
ScaleBoxは子ウィジェットのサイズを自動調整してくれるものです。これでButtonのサイズが変更された時に自動でButton内のテキストの大きさも一緒に変更してくれるようになります。つまり画面サイズが変更された時にButtonと一緒にTextのサイズを拡大縮小させるために使用するのがScaleBoxになります。
ScaleBoxウィジェットを選択した状態でCtrl+Cでコピー＆ペーストを繰り返して、ScaleBoxが合計4つになるように増やします。
https://scrapbox.io/files/65cbd2a8a31fd800240ddab2.jpg
全てのScaleBoxを選択した状態でスロット > size > フィルを選択します。
https://scrapbox.io/files/65cbd2b2f164330024cd4f7c.jpg
フィルとは？
フィルはVerticalBox内を埋めるようにウィジェットを配置するための設定です。これでVerticalBox内に均等に埋まるようにScaleBoxが並びました。
ACTIONGAMEのテキストを選択した状態でVerticalAlignmentで真ん中を選択します。
https://scrapbox.io/files/65cbd2db053b010024808793.jpg
テキストを選択した状態でアピアランス > Font > Sizeを70にします。その後、Outline Setting(文字の輪郭)を5にします。
https://scrapbox.io/files/65cbd2f054606a0025ad934c.jpg
🐱少し見にくいですが文字に黒い輪郭がつきました。
ではそれぞれのボタンの間隔を空けます。一番上のScaleBoxを選択した状態でスロット > Padding > Topを40にします。
https://scrapbox.io/files/65cbd30d9cf05d0025bd0d64.jpg
Shiftキー押しながらクリックで、残り三つのScaleboxを選択した状態で同じようにTopを今度は5にします。
https://scrapbox.io/files/65cbd31961b5f100258814cc.jpg
現在こんな感じのUIになっています。
https://scrapbox.io/files/65cbd329854f6800257db612.jpg
😺では、このあたりで確認のためブループリントからUIを表示しましょう。今回はメニューなのでレベルブループリントにウィジェットを作成するノードを作ります。
レベルブループリントを開きます。
https://scrapbox.io/files/65cbd33ab1e3220024c7414f.jpg
BeginPlayからCreate widgetと検索してウィジェット作成ノードを作成します。ClassをWBP_Menuにします。AddtoViewportノードを繋げます。
https://scrapbox.io/files/65cbd348f0d3fe00246c80a2.jpg
プレイする前に新規エディタウィンドウにした方がUIの変化がわかりやすいので選択しておきます。
https://scrapbox.io/files/65cbd364cda5030025d08403.jpg
プレイしてみます。手順通りに行えばこんな配置↓になっていますが細かい部分は違っても問題はありません。
https://scrapbox.io/files/65cbd3711019e500252b863c.jpg
😺VerticalBoxを使用しているため綺麗に縦一列に配置する事ができました。またScaleBoxを使用しないとUIの解像度が変更された時にテキストのサイズはそのままになってしまいます。なので基本的にButtonを作成する時には親にScaleBoxを配置しておくとテキストが自動調整されるので便利です。
③それぞれのボタンに名前をつける|実践
ではボタンのテキストとウィジェットの名前も変更しておきましょう。
ScaleBoxのButton下にあるTextウィジェットを選択した状態でテキスト内容を「PLAY」に変更します。
https://scrapbox.io/files/65cbd3c593ef6a002470366c.jpg
同じようにそれぞれのボタン下にあるテキストを選択した状態でコンテンツからText内容を以下の様に変更します。STORE,SETTINGS,QUITです。
https://scrapbox.io/files/65cbd3f9c4ed390025c2265c.jpg
ボタンのサイズを統一しましょう。それぞれのButtonを選択した状態(Ctrl+クリックで追加選択できます)でHorizontalAlighnmentを一番右の伸縮する設定にします。
https://scrapbox.io/files/65cbd40e053b01002480895f.jpg
ScaleBoxとButtonにそれぞれ以下の様に名前を付けていきます。特にButtonは後で変数として使用した時にこの名前が使われるので必ず名前を付けておきましょう。
https://scrapbox.io/files/65cbd4508c34ca0024458729.jpg
テキストコピペ用↓
Play_ScaleBox
Play_Button
Store_ScaleBox
Store_Button
Settings_ScaleBox
Settings_Button
Quit_ScaleBox
Quit_Button
😺ウィジェットに名前を付ける時に概要名(Play)とウィジェット種類名(Button)を組み合わせて命名するとわかりやすいと思います。なのでゲームをプレイさせるためのボタンなら「Play_Button」という感じです。これに関しては単に個人的に推奨してるだけなので命名は何でも良いです。
少しボタンの色を暗くします。Buttonを全て選択した状態でアピアランス >
BackgroundColorをグレーにします。Hexs線形は「B5B5B5FF」になったのでこれをそのままコピペしても構いません。
https://scrapbox.io/files/65cbd465854f6800257dbc37.jpg
同じくButtonを全て選択した状態で、アピアランスのStyle > Hoverd > Tintを青にします。Hexs線形は「002080FF」です。
https://scrapbox.io/files/65cbd48fa39d9b0025484113.jpg
Hoveredの設定とは？
HoveredはマウスをButtonに対してホバーさせた(上にカーソルを当てた)時の場合のButtonの見た目を決定します。
プレイしてみましょう。これでマウスカーソルをあてた時に青色になります。
https://scrapbox.io/files/65cbd4d487c7860025414aab.gif
④背景にぼやをつける|実践
では、次にBackgroundBlurというウィジェットで背景にぼやをかけておきましょう。
BackgroundBlurとは？
BackgroundBlurについて簡単に紹介するとポーズ画面等でよく使用される"ぼや"の事です。今回は背景の画像を使用しないので代わりに使用します。
https://scrapbox.io/files/65cbd5489dc2d5002d0a80d8.jpg
BackgroundBlurウィジェットをCanvasPanel下に配置します。
https://scrapbox.io/files/65cbd55e1d703b0024cd6ddb.jpg
BackgroundBlurを選択した状態でアンカーを全体に縮小する右下のものにします。
https://scrapbox.io/files/65cbd57ea39d9b0025484425.jpg
BackgroundBlurのスロットの右と下のオフセットを0ずつにします。
https://scrapbox.io/files/65cbd588c393b9002527cf82.jpg
🐱これで画面一杯にウィジェットを広げる事ができました。
BackgroundBlurを選択した状態でBlurStrengh(ぼやの強さ)を10にします。
https://scrapbox.io/files/65cbd59f5973ee002f0159bb.jpg
プレイしてみます。こんな感じに背景がぼやになりました↓
https://scrapbox.io/files/65cbd5ad286ac6002df6ee57.jpg
⑤カーソルを表示させたままにさせる|実践
では、現在の状態ではボタンなどはクリックすると問題なく反応はしますが、ボタン以外の背景の部分をクリックするとマウスが消えてしまいます。さらにキャラクターが移動操作もできてしまっています↓
https://scrapbox.io/files/65cbd6119970e600257352b5.gif
なのでこのメニュー画面を表示している間は、背景の箇所をクリックしてもマウスカーソルが消えずに、かつキャラの操作は無効になるようにしましょう。では先に背景をクリックしてもマウスカーソルが消えないようにします。
Blueprintsフォルダを作成します。
https://scrapbox.io/files/65cbd6225fef9200253cf49f.jpg
コンテンツブラウザからブループリントクラス > PlayerControllerクラスを選択,作成して名前をBP_MyPlayerControllerにします。
https://scrapbox.io/files/65cbd632e2314300242fc403.jpg
PlayerControllerとは？
PlayerControllerはプレイヤーの操作を管理するためのブループリントクラスです。マウスの表示などの設定もここで行う事ができます。
BP_MyPlayerControllerを開いて、マウスインターフェースのShowMouseCursorにチェックを入れます。
https://scrapbox.io/files/65cbd68361f2cd0025f42469.jpg
ShowMouseCursorとは？
ShowMouseCursorにチェックを入れると、画面をクリックした際にマウスカーソルが消えなくなります。
設定からワールドセッティングを開きます。
https://scrapbox.io/files/65cbd6a08c34ca0024458ac5.jpg
「選択したゲームモード」からPlayerControllerの設定項目に作成したBP_MyPlayerControllerに設定します。
https://scrapbox.io/files/65cbd6ac8d32340025d4edd3.jpg
これでプレイしてもマウスカーソルが消えなくなりましたが、まだキャラが操作できる状態になっています。
https://scrapbox.io/files/65cbd6d4ba33460025e47ded.gif
😺次にメニュー画面を表示させている最中はキャラクターは操作できないようにしましょう。
⑥メニュー画面ではUI操作のみ可能にする
ではレベルブループリントを開きます。現在はこんな感じ↓
https://scrapbox.io/files/65cbd71ab43c0e00258fadc5.jpg
AddtoViewportからSetInputModeUIOnlyノードを作成します。GetPlyerControllerを繋いでおきます。
https://scrapbox.io/files/65cbd725e639850025ac132f.jpg
SetInputModeUIOnlyノードとは？
SetInputModeUIOnlyノードとはUI上の操作のみを有効にするノードで、キャラの操作やカメラの操作がこれで無効になります。これもPlayerControllerの設定項目になるので、GetPlyerControllerでPlayerControllerを取得して、そのPlayerControllerの設定を変更したといった形になります。
プレイしてみて試してみると、キャラの操作が無効になっている事が確認できます。
https://scrapbox.io/files/65cbd7c17794d700239e1039.gif
⑦メニュー画面のUIは完成！
これでひとまずメニュー画面は完成しました。最終的なウィジェットの階層はこんな感じです↓
https://scrapbox.io/files/65cbd7edc483190024fb5ef9.jpg
プレイするとこんな感じになります↓
https://scrapbox.io/files/65cbd1dab931ef00235c0b03.gif
では次回のページから、それぞれのボタンを押した時の以下の挙動を実装していきます。
・PLAY → ゲームをプレイする
・STORE → ショップを開く
・SETTINGS → ゲームの音量を変更する
・QUIT → ゲームを終了する
では今回は以上です。
メニュー画面はどのレベルに作成する？
今回はゲームを実際にプレイするレベルでメニュー画面を作成しました。このやり方だとメニュー画面からロードを挟まずにすぐにゲームをプレイできます。一方でメニュー用のレベルを別で作成しておいて、プレイボタンを押したらゲームプレイのレベルに遷移するというやり方もあります。どちらでも構いませんがゲームに合わせてといった感じになります。例えばスーパーマリオのように複数のステージから選ぶ場合はメニュー画面専用のレベルを作成してそこから異なるレベル(ステージ)を開くといった形が良いと思います。