74.メニュー画面を作る③実践
①SETTINGSボタンを作る|実践
メニューのSETTINGSボタンを押したら設定画面が開いて、音量が調整できるスライドバーを作成したいと思います。
WBP_Menuを開いて、Menu_VerticalBoxとStore_CanvasPanelの目のアイコンを閉じて非表示にしておきます。
https://scrapbox.io/files/65cbe72af4d80100261826a6.jpg
CanvasPanelを追加して名前をSettings_CanvasPanelにします。
https://scrapbox.io/files/65cbe7310349ad0026f00c51.jpg
Settings_CanvasPanelのアンカーを中央に設定にします。
https://scrapbox.io/files/65cbe7388cc4f90024b4c0a1.jpg
サイズXYを1000,500,Alighnmentを0.5ずつにします。
https://scrapbox.io/files/65cbe741f164330024cd793a.jpg
overlayを追加します。
https://scrapbox.io/files/65cbe748a671c40024192a0c.jpg
OverlayをSettings_CanvasPanelに追加してアンカーを水平に伸ばす設定にします。
https://scrapbox.io/files/65cbe75569ac4e002656c81a.jpg
Overlayの左オフセット,位置Y,右オフセットを0,サイズYを30にします。
https://scrapbox.io/files/65cbe7607c9424002622aa78.jpg
次にSliderをOverlay下に配置します。
https://scrapbox.io/files/65cbe76a641ec500241b33ca.jpg
Sliderとは？
Sliderはドラッグで数値を調整でき、音量や画面の明るさの変更などに使用されるウィジェットです。
SliderのHorizontalを一番右の伸縮させる設定にして、Verticalを真ん中にします。
https://scrapbox.io/files/65cbe7814192ce002374169e.jpg
Sliderのスタイル > Bar Thickness(スライダーのバーの太さ)を10にします。
https://scrapbox.io/files/65cbe78d24047f0025a3b08a.jpg
同じくSliderのスタイル > NormalThumbImageとHoverdThumbImageのImageSizeを20と70にします。これでSliderのつまみのサイズが変更されました。
https://scrapbox.io/files/65cbe798aab22a0025a7a8e0.jpg
現在はこんな感じになっています↓つまみも少し大きくなっています。
https://scrapbox.io/files/65cbe7b4f80fb000258ab3d4.jpg
テキストを追加します。
https://scrapbox.io/files/65cbe7be8a1fef0026eeeda1.jpg
テキストの設定は以下のように変更します。テキストはSoundVolumeにします。
https://scrapbox.io/files/65cbe7c79f55ad002386d084.jpg
続いてFontのSizeと輪郭サイズも変更しておきます。
https://scrapbox.io/files/65cbe7dd5c8d50002433439f.jpg
こんな感じのテキストになりました。
https://scrapbox.io/files/65cbe7e71aa5ed00269032da.jpg
ストア画面で作成したメニュー画面に戻るためのButtonとなるScaleBoxをコピーして、Settings_CanvasPanelにペーストして追加します。
https://scrapbox.io/files/65cbe7f1aab22a0025a7aa1c.jpg
追加したScaleBoxの設定をアンカーを下に固定します。
https://scrapbox.io/files/65cbe7f9fb41fa0026058368.jpg
ScaleBoxのXを0,Yを250にします。
https://scrapbox.io/files/65cbe80bba33460025e4a551.jpg
Back_Buttonの名前がかぶってしまったので、BackInStore_Button,BackInSettings_Buttonとします。
https://scrapbox.io/files/65cbe8122e1f4200263fa48b.jpg
🐱これらは変数として使用するのできちんと命名しておきましょう。
Settings_CanvasPanelのIsVariableにチェックを入れます。
https://scrapbox.io/files/65cbe82069ac4e002656ca85.jpg
Menu_VerticalBoxのSettings_Buttonを選択した状態でOnClickedをクリックします。
https://scrapbox.io/files/65cbe83987c7860025417853.jpg
ノードを以下のように作成します。Menu_VerticalBoxとSettings_CanvasPanelの変数を追加して、SetVisibiltyでメニュー画面と設定画面を切り替えます。
https://scrapbox.io/files/65cbe8471d703b0024cda3ae.jpg
🐱続いて設定画面からメニューへ戻るボタンも作っておきましょう。
Settings_CanvasPanelの中にあるBackInSettings_ButtonのイベントからOnClickedをクリックします。
https://scrapbox.io/files/65cbe85087c78600254178ab.jpg
ノードは以下の様にします。
https://scrapbox.io/files/65cbe85aa39d9b0025487f75.jpg
このSettings_CanvasPanelは最初は非表示で良いのでVisibiltyをCollapsed(非表示)にしておきます。
https://scrapbox.io/files/65cbe8711d703b0024cda44c.jpg
これで設定画面への切り替えができました。
https://scrapbox.io/files/65cbe87e053b01002480e5c6.gif
😺次にBGMを追加してスライダーで音量調整できるようにしていきます。オーディオに関してはこの本ではここまでのページではまだ扱っていませんが、次の「BGMと効果音の章」にて詳しく解説していきます。今回は簡単に作っていきます。
まずはStaterContentsのStarter_Music_Cueをドラッグで追加します。これで音楽がプレイ中に流れます。
https://scrapbox.io/files/65cbe88b359fdb00266ed847.jpg
コンテンツブラウザでAudioフォルダを作成します。右クリック > オーディオ > クラス > サウンドクラスミックスを選択して作成します。名前をMasterSoundMixにします。
https://scrapbox.io/files/65cdd48a20dc0d0024ec5705.jpg
サウンドクラスミックスとは？
サウンドクラスミックスは複数のサウンドをグループにまとめるために使用でき、関連するすべての音の音量や音程などのパラメーターを同時に変更できます。
🐱このあたりはまだ解説していないので一旦手順に沿ってやっていきましょう。
MasterSoundMixを開いてSoundClassからプラスボタンを押してSoundclassにMasterを選択します。
https://scrapbox.io/files/65cbe8d4f678350026511e52.jpg
Masterを選択する事でゲームの全ての音量を変更できます。
次にSettings_CanvasPanelのSliderを選択した状態でイベント > OnValueChangedをクリックします。
https://scrapbox.io/files/65cbe8fa9dc2d5002d0aad30.jpg
OnValueChangedノードが作成されます。
https://scrapbox.io/files/65cbe91d24047f0025a3b705.jpg
OnValueChangedノードとは？
OnValueChangedノードはスライダーのつまみの値(Valueの部分)が変更された時に実行されるノードです。Sliderのアピアランス > Valueの値が変更された時にその値がValueの出力ピンから出力されます。
https://scrapbox.io/files/65cbe94932423300252d22ba.gif
なのでここでつまみをスライダーに半分(0.5)にするとOnValueChangedノードのValueからは0.5が出力されます。
🐱つまりスライダーの値が変更された時に、実行されるノードがOnValueChangedノードになります。
OnValueChangedからSetSoundMixClassOvverideノードを追加します。
InSoundMixMoidifiierをMasterSoundMixにして、InSoundClassでMasterを選択、FadeInTimeを0にします。
https://scrapbox.io/files/65cbe95839c64c0024107378.jpg
SetSoundMixClassOverideノードとは？
SetSoundMixClassOverideノードとはサウンドミックスの設定を行うノードです。簡単に言うと指定した音の音量などのパラメーターを調整するノードです。InSoundMixMoidifiierは設定を変更するサウンドミックスを選択できます。InSoundClassはサウンドミックスで調整するサウンドクラスを選択します。FadeInTimeはつまみを変更してから音量が変わるまでの時間です。ここはスライダーで変更した時にすぐに反映させたいので0にしました。
🐱難しい部分なのでわからなくても問題ありません。音に関しては次章から1から学んでいきましょう。
最後にPushSoundMixModifierノード(SoundMixを適用させるノード)を繋げます。MasterSoundMixを選択します。
https://scrapbox.io/files/65cbe9b10c0545002353067e.jpg
次にSliderのつまみの位置を中央にしておきます。Settings_CanvasPanelのSliderを選択した状態でアピアランス > Valueを0.5にします。
https://scrapbox.io/files/65cbe9c224047f0025a3b8a8.jpg
これでプレイしてみましょう。つまみを移動させると音量が変わるようになりました。
https://youtu.be/F1Z8e-7DA8Y
😺これで音量調整できる設定画面は完成です。実際のゲーム開発だと変更された値を、以前のページで紹介したSaveGameで保存しておいて次回からはその変更が適用されるようにデータをロードしたりします。
②QUITボタンを作る|実践
では最後にQuit(ゲーム終了)ボタンを作成します。これは簡単です。
まずSettings_CanvasPanelの目のアイコンを閉じて、Menu_CanvasPanelの目のアイコンを開いた状態にします。
https://scrapbox.io/files/65cbe9d3e639850025ac3f43.jpg
MainMenu_VerticalBox下にある、Quit_Buttonを選択した状態でOnClickを選択します。
https://scrapbox.io/files/65cbe9fb3bc901002449d1d6.jpg
QuitGameノード(ゲームを終了する)を繋げます。
https://scrapbox.io/files/65cbea6df6783500265123ae.jpg
WBP_Menuで実装した全ウィジェット確認
最終的な全てのウィジェット階層画像はこちら↓
https://scrapbox.io/files/65cbeaa64094050024424746.jpg
全ウィジェット↓
https://scrapbox.io/files/65cbeabb253d750026e80f58.jpg
⑤完成!
これにて全ての機能を実装は完了しました。
https://youtu.be/lTTqwwdXevM
《実践演習》
ゲーム中にメニュー画面を開く
目標：Tabキーを押すと作成したメニュー画面のUIを表示させるようにしよう
①WBP_Menuでメニュー画面を開くためのカスタムイベントを作成しよう。
②カスタムイベントはSet Visibilityでメニュー画面を表示し、Set Input Mode UI Onlyを用いてゲーム中の操作を無効にし、Show Mouse Cursorでマウスを表示させよう。
③レベルブループリントで、Create Widgetの変数の昇格を行い、アクセスを容易にしよう
④同じくレベルブループリントでTabキーのインプットイベントを追加し、ゲットしたWBP_Menuを介して作成したカスタムイベントを実行できるようにしよう。
レベルブループリント
https://scrapbox.io/files/65cddc23b34ead002505eaf5.jpg
WBP_Menu
https://scrapbox.io/files/65cddc3409041700230f9e92.jpg