73.メニュー画面を作る②実践
前回までにつくったメニュー画面↓
https://scrapbox.io/files/65cbd1dab931ef00235c0b03.gif
前回までにメニュー画面の見た目を作成しました。このページから機能を付け加えていきます。
これから実装する機能↓
https://youtu.be/lTTqwwdXevM
つける機能は簡単に言うと以下の機能を追加していきます。
・PLAY → ゲームをプレイする
・STORE → ショップを開く
・SETTINGS → ゲームの音量を変更する
・QUIT → ゲームを終了する
ではまずはPlayButtonから作成していきましょう!
①PLAYボタンを作る|実践
Playボタンを押したらメニュー画面は非表示になり、ゲームをプレイ(キャラ操作)できるようにします。
作成していたMenuのウィジェットブループリントを開きます。
https://scrapbox.io/files/65cbdf0c3bc901002449aff8.jpg
前回作成して命名した「Play_Button」を選択した状態でイベントのOnClickedをクリックしてイベントを作成します。
https://scrapbox.io/files/65cbdf1fb06a77002676d431.jpg
OnClickedノードが作成されました↓
https://scrapbox.io/files/65cbdf33f67835002651038b.jpg
OnClickedノードとは？
OnClickedはボタン(ここでいうPlay_Button)が押された時に実行されるノードです。
SetVisibiltyノード(ウィジェットの表示非表示の切り替え)を作成してCollapsed(非表示)を選択します。
https://scrapbox.io/files/65cbdf4d805baf0024b88612.jpg
🐱では非表示にするのはメニュー画面なのでCanvasPanelを変数化していきます。
デザイナーをクリックしてUI表示ウィンドウに戻ります。
https://scrapbox.io/files/65cbdf6466e9b800249c95ae.jpg
CanvasPanelの名前をMain_CanvasPanelに変更しておきます。
https://scrapbox.io/files/65cbdf6e91fecc0026110ed2.jpg
Menu_CanvasPanelを選択した状態でIsVariableにチェックを入れます。これでウィジェットを変数化できました。
https://scrapbox.io/files/65cbdf76e639850025ac249d.jpg
グラフタブに戻って、Menu_CanvasPanelという変数がある事を確認します。
https://scrapbox.io/files/65cbdf82b28be60024e94d43.jpg
Menu_CanvasPanelをドラッグして追加します。
https://scrapbox.io/files/65cbdf8ef164330024cd6801.jpg
🐱これでPLAYボタンを押したらメニュー画面が非表示になります。では現状キャラクターの操作は無効にしているので、プレイボタンを押したら操作可能になるようにノードを作成します。
SetInputModeGameOnlyをSetVisibiliyから接続します。
https://scrapbox.io/files/65cbdfc76de9f7002482e73c.jpg
https://scrapbox.io/files/65cbdfd0854f6800257ddca3.jpg
SetShowMouseCursorを作成してGetPlayerControllerを接続します。
https://scrapbox.io/files/65cbdfddfa7ab600261e7de4.jpg
SetShowMouseCursorとは？
SetShowMouseCursorはマウスカーソルを非表示にするノードで設定元はPlayerControllerになるので取得しました。
プレイしてみてPlayButtonをクリックするとメニュー画面が非表示になってキャラ操作が可能になりました。
https://scrapbox.io/files/65cbe026053b01002480cd0d.gif
😺これでPlayボタンは実装できました。では残りの三つのボタンも実装していきましょう。
②STOREボタンを作る|実践
では次にSTOREボタンですが、ボタンを押したらメニュー画面からストア画面のUIに切り替えられるようにしたいと思います。
CanvasPanelをMenu_CanvasPanelの子に追加します。名前をStore_CanvasPanelにします。
https://scrapbox.io/files/65cbe04c9f55ad002386be96.jpg
Store_CanvasPanelのアンカーを全画面に伸縮する設定にします。
https://scrapbox.io/files/65cbe0554b163f00245e5b86.jpg
Store_CanvasPanelの右オフセットと下オフセットを0にして、全画面一杯に広がるようにします。
https://scrapbox.io/files/65cbe05fc37e430023ae48e6.jpg
一旦MainMenu_VerticalBoxの目のアイコンを押して非表示にしておきます。
https://scrapbox.io/files/65cbe064370f690023ea0fbe.jpg
ボタンを横に並べるためにHorizontal Boxを追加して名前をItemButtons_HorizontalBoxにします。
https://scrapbox.io/files/65cbe0735c8d500024333081.jpg
HorizontalBoxを選択した状態でアンカーを中央に設定します。
https://scrapbox.io/files/65cbe07a7b877b002442cecf.jpg
同じくHorizontalBoxを選択した状態で位置はXYともに0、サイズはXが1400とYが500にします。Alingnmentも0.5ずつにします。
https://scrapbox.io/files/65cbe084dcbf6200254e0d49.jpg
テキストやボタンなどを重ねて配置するためにOverlayをHorizontal下に配置します。
https://scrapbox.io/files/65cbe08db48fc90028843cfd.jpg
Overlayとは?
Overlayとは複数の子ウィジェットを配置できるウィジェットになります。通常子ウィジェットは一個しか配置できませんがこのウィジェットで複数配置できるようになります。
OverlayのSlotをフィルに設定します。これでHorizontalBox全域に埋まって伸縮するようにします。
https://scrapbox.io/files/65cbe0b2ee0da00024229a34.jpg
アイテムの背景画像となるImageをOverlayに配置します。
https://scrapbox.io/files/65cbe0bf9edcce00257afeb2.jpg
ImageのHorizontalとVerticalを一番右の伸縮する設定にします。
https://scrapbox.io/files/65cbe0c87385c00025815b61.jpg
作成したOverlayをItemButton下に計三つになるようにCtrl+CとCtrl+Vでコピペして増やします。
https://scrapbox.io/files/65cbe0d39dc2d5002d0a98e9.jpg
三つのOverlayを選択した状態でスロットのPaddingを20にして隙間を空けます。
https://scrapbox.io/files/65cbe0f14b163f00245e5e4a.jpg
Overlay下のImageを全て選択した状態でColorandOpacityをグレー(Hex線形::B5B5B5FF)にしておきます。
https://scrapbox.io/files/65cbe0fb4b163f00245e5e5b.jpg
一番上のOverlayの中のImageをコピして二枚目のアイテムを表示させるためのImageを追加します。
https://scrapbox.io/files/65cbe118359fdb00266ec589.jpg
ペーストして追加したImageのPaddingを80にします。
https://scrapbox.io/files/65cbe122a258aa0023cde835.jpg
残りのOverlayに作成したImageをコピペします。
https://scrapbox.io/files/65cbe12ca6f7b4002530b8f9.jpg
🐱なおウィジェット名は手順で名前を変更するウィジェット以外は違っていても窯言わないのでそのままでオッケーです。
ではアイテムの画像ですが、基本的になんでもいいです。
マーケットプレイスのアセットでも構いません。
『Pin RPG Icon Set 01 - 267+ Icons』と検索してプロジェクトに追加してください。
https://scrapbox.io/files/65cbe2345973ee002f0172d3.jpg
https://scrapbox.io/files/65cbe25b7621e9002615ef9b.jpg
画像は何でも良いですし、なしでも構いませんが今回はこれで進めていきます。
ダウンロードした画像をコンテンツブラウザのUIフォルダへドラッグします。
https://scrapbox.io/files/65cbe29363f80f0026ce66ad.jpg
画像はイラストやのフリー画像ですが、みなさまはマーケットプレイスの無料アセットで進めていきます
WBP_Menuを開いて、Overlay内の二つ下のImageを選択した状態でアピアランス > Brush > Imageへ画像を選択します。
https://scrapbox.io/files/65cbe2c9fb41fa0026057867.jpg
残りの二枚のImageも変更します。
https://scrapbox.io/files/65cbe2de167e17002441681d.jpg
では金額を表示するボタンをさせます。Buttonを一番上のOverlayに追加します。
https://scrapbox.io/files/65cbe2ee87c7860025416b5b.jpg
PaddingからBottomを-30に、Horizontalを真ん中にVerticalを下に設定します。
https://scrapbox.io/files/65cbe3035c8d5000243334df.jpg
Textを今追加したButton下に追加します。
https://scrapbox.io/files/65cbe30e32423300252d0bf0.jpg
Text内容を「$10」にしてpaddingを上から順に40,10,40,10にします。
https://scrapbox.io/files/65cbe31aa258aa0023cdf08c.jpg
ButtonのBackgroundColorを赤色にします。Hex線形「FF0025FF」
https://scrapbox.io/files/65cbe32639c64c0024106216.jpg
ボタンをそれぞれのOverlayにコピペして追加します。
https://scrapbox.io/files/65cbe3319dc2d5002d0a9ce5.jpg
アイテムボタンの配置は完成となります。ここまでのウィジェット構造です↓
https://scrapbox.io/files/65cbe33bee0da00024229eb1.jpg
🐱では今度はストア画面からメニュー画面に戻るボタンを作っていきましょう。
ScaleBoxをStore_CanvasPanelに追加します。
https://scrapbox.io/files/65cbe344a4f8f90026782921.jpg
ScaleBoxのアンカーを下に設定します。
https://scrapbox.io/files/65cbe3519edcce00257b0460.jpg
ScaleBoxの位置を0に、サイズをXを300,Yを100に。Alignmentを0.5,2.5にします。
https://scrapbox.io/files/65cbe35e3bc901002449bb5d.jpg
🐱なおこういった値は実際に自身でゲーム開発する際には地道に調整して探していくしかありません。かなり時間かかりますが頑張りましょう
ButtonをScaleBox下に追加します。
https://scrapbox.io/files/65cbe3703e40930025c5968b.jpg
ButtonのHorizontalとVerticalを一番右に設定します。
https://scrapbox.io/files/65cbe37e30bbc1002544001c.jpg
TextをButton下に追加して、テキスト内容に「Back」と入力します。
https://scrapbox.io/files/65cbe38ec37e430023ae50f9.jpg
ItemButtons_HorizontalBoxの位置Yを-100にして位置を調整しておきます。
https://scrapbox.io/files/65cbe39afd5b4f0027b16e52.jpg
現在こんな感じのウィジェットブループリントになっています。
https://scrapbox.io/files/65cbe3a43d6e8f0025f65912.jpg
🐱ではメニュ―画面からSTOREボタンを押したらSTORE画面を開けるようにします。
一旦表示を切り替えておきましょう。Menu_VericalBoxの目を開いた状態にして、Store_CanvasPanelを目を閉じた状態にしておきましょう。
https://scrapbox.io/files/65cbe3b89970e60025737e10.jpg
Menu_VerticalBoxのIsVariableのチェックを入れて変数化しておきます。
https://scrapbox.io/files/65cbe3c07385c00025816394.jpg
メニューのStore_Buttonを選択した状態でOnClickedを押します。
https://scrapbox.io/files/65cbe3cd63f80f0026ce68ca.jpg
OnClickedからSetVisibilityノードを作成してターゲットにMenu_VerticalBoxを追加します。InVisibilityをCollapsed(非表示)に設定しておきます。
https://scrapbox.io/files/65cbe3dcabe2390024e22b0b.jpg
🐱これでStoreボタンを押したら、メインメニューの画面が非表示になるように実装できました。続いてストア画面の表示です。
同じようにStore_CanvasPanelを選択した状態でIsVariableのチェックを入れて変数化しておきます。
https://scrapbox.io/files/65cbe3e7ae3a950025f0ea1d.jpg
グラフを開いて先ほど作成したSetVisibilityから追加していきます。
https://scrapbox.io/files/65cbe3f469ac4e002656c07c.jpg
先ほどのSetVisibilityから、Store_CanvasPanelの変数を追加してSetVisibilityを作成し、Visibleを選択します。
https://scrapbox.io/files/65cbe4035c8d5000243336df.jpg
ではゲームプレイ最初の時点で、画面をどのUIを表示させるのかの設定を元に戻しておきましょう。Menu_VerticalBoxのビヘイビア > VisibilityをVisibleにします。
https://scrapbox.io/files/65cbe40df9b1d50025c4028d.jpg
Store_CanvasPanelのVisibilityをCollapsedにします。
https://scrapbox.io/files/65cbe416ae3a950025f0ea71.jpg
プレイしてみます。最初の時点でMenu_VerticalBoxが表示されます。STOREボタンを押すとストア画面が開かれました。
https://scrapbox.io/files/65cbe41f87c7860025416df8.gif
🐱ではストア画面からメニュー画面に戻るボタン「Back」の方の処理も作っていきましょう。
目のアイコンを切替えて、Store_CavansPanelを表示させておきます。
https://scrapbox.io/files/65cbe42aa2122400261d736f.jpg
名前をBack_Buttonにしておきます。
https://scrapbox.io/files/65cbe4344192ce0023741010.jpg
では、Back_Buttonを選択した状態でOnClickedを選択します。
https://scrapbox.io/files/65cbe43ba301e80025400cb1.jpg
SetVisibilityノードを作成して、Store_CanvasPanelを変数で追加してCollapsedにします。
https://scrapbox.io/files/65cbe446b915230025e5d93e.jpg
そのまま続けてSetVisibilityノードを追加して、Menue_VerticalBoxを追加してVisibleにします。
https://scrapbox.io/files/65cbe4554b163f00245e6471.jpg
Back_ButtonのHoverdを青色(Hex線形:002080FF)にしておきます。
https://scrapbox.io/files/65cbe46a359fdb00266ecc74.jpg
プレイして確認してみると、Backボタンでメニュー画面に戻るようになりました。
https://scrapbox.io/files/65cbe47aa5e6180025635df7.gif
🐱これでPLAYとSTOREボタンを実装できました。次回SETTINGSとQUITボタンを実装していきます。