【Godot 4.0】スマホ３Dゲームを作るための勉強　その２２　ゲームシステムを作る　その７　PopupPanelをデザインする

　ゲームエンジンGodot4.0で3Dスマホゲームを作りたいと思いますが、その前にお勉強しています。
　2023/3/1にstable版がリリースされました。
 [Godot_v4.0-stable_win64.exe.zip](https://godotengine.org/download/windows/)を使用しています。

# 目的
　ゲームシステムをつくっていきます。
　設定仮面のデザインを修正します。

# ベースプロジェクト
　下記で作成したプロジェクトをベースに機能追加をします。
　【Godot 4.0】スマホ３Dゲームを作るための勉強　その２１　ゲームシステムを作る　その６　設定画面をPopupPanelで作成する
　https://qiita.com/FootInGlow/items/3253204d9952cff4acfd

　github(Godotのプロジェクトマネージャーからインポートして利用できます）
　https://github.com/footinglow/Godot4/tree/main/02_study/S21_GameSystem_006

# 設定仮面のデザインを修正
　テスト用とはいえ残念過ぎるので、体裁を整えたいと思います。
　![スクリーンショット (107).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a1dbcc4f-7a22-4a6a-2e46-ac698ff4f70c.png)

# 中央に表示する
　VBoxContainerを選択して、ビューメニューの右のアイコンをクリックして、「中央」アイコンをクリックします。
![スクリーンショット (113).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/5b4c70ad-1f79-f045-b303-3dffcc680416.png)

# マージンをとる
　VBoxContainerを利用して、３つのコントロールを縦に並べていますが、くっつきすぎているので余白をつくります。
　VBoxContainerと３つのコントロールの間にMarginContainerを挟むようにすると、隙間を調整することができます。

　VBoxContainerを右クリックして、子ノードを追加から「MarginContainer」を追加します。
　MarginContainerにLabelをドラッグして子ノードにします。
　MarginContainerはVBoxContainerの下にドラッグします。
　![スクリーンショット (111).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/823b6a7e-1187-b023-1e16-a4062dd48f1f.png)
MarginContainerを選択した状態で、インスペクタのControl/Theme Overrides/Constantsの「Margin Top」と「Margin Bottom」にチェックをいれて、それぞれ１０を設定します。
![スクリーンショット (115).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/d434cb60-3ebb-15cf-f007-1baf38b36e78.png)
Labelの下に少し隙間ができました。
![スクリーンショット (116).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/09399c91-47ca-54f8-3678-5859beab982b.png)

　VBoxContainerを右クリックして子ノードを追加から「MarginContainer」をふたつ追加します。
　Labelと同様に、HSliderとButtonもそれぞれMarginContainer2とMarginContainer3の子ノードにします。
　Margin Top/Margin Bottomにチェックを入れて、値も同様(10)に設定します。
![スクリーンショット (117).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/0af2e9ad-1653-9e2e-c806-d58f7bd7979a.png)

# スクリプトを修正する
　Label、HSliderの階層を変更したので、GDScriptも忘れずに変更します。

　res://settings_popup_panel.gdを開きます。
```GDScript
extends PopupPanel

func open():
	get_tree().paused = true
	popup_centered()

func _on_h_slider_drag_ended(value_changed):
	$ControlBaseSize/VBoxContainer/MarginContainer/Label.text = "発射間隔 %.1f秒" % $ControlBaseSize/VBoxContainer/MarginContainer2/HSlider.value

func _on_button_pressed():
	hide()

func _on_popup_hide():
	get_tree().paused = false
```
Labelは間に「MarginContainer」が入りました。
変更前 ：\\$ControlBaseSize/VBoxContainer/Label.text
変更後 ：\\$ControlBaseSize/VBoxContainer/MarginContainer/Label.text

HSliderは間にMarginContainer2が入りました。
変更前：\\$ControlBaseSize/VBoxContainer/HSlider.valu
変更後：\\$ControlBaseSize/VBoxContainer/MarginContainer2/HSlider.valu
# Panelの色を変更してふちどりします。
　SettingsPopupPanelを選択して、インスペクタのWindow/Theme Orverrides/Styles/Panelの＜空＞をクリックして、「新規StyleBoxFlat」を設定します。
　![スクリーンショット (118).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/0b62b649-f3a8-327b-1d0e-69e533a53451.png)
　「StyleBoxFlat」をクリックして詳細設定を表示します。
![スクリーンショット (120).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/e8fef64f-a248-2db6-a36c-3ef1e2e87eec.png)
　いろいろ変更できそうです。

## Panelの色を変更する
　BG Colorの右の色をクリックするとカラーピッカーで色を選択できます。
![スクリーンショット (123).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/5406f075-2c39-5831-6c0f-fb20498bf498.png)

## 縁取りする
　Border Widthの数字を０から変更するとピクセル単位で縁をつくることができます。
　Left/Top/Right/Bottomにそれぞれ１０を設定しました。
　またBorder/Colorもカラーピッカーで変更できます。(R,B,G)=(140,80,50)
　Blendもオンにしました。
　![スクリーンショット (125).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/dc344cd8-25da-266a-85fe-5dab3984271f.png)

## 縁を丸くする
　Corner Radiusを設定すると縁を丸くすることができます。
　Top Left/Top Right/Bottom Right/Bottom Leftそれぞれ30pxを設定しました。
　![スクリーンショット (126).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/939735bf-a934-dab4-ea5d-2099d4db3f72.png)


　実行します。
　最初より良くなったでしょうか？

![スクリーンショット (127).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/c305bbe9-c3e8-e419-ff07-a5997245663f.png)

　以上です。