【Godot 4.0】スマホ３Dゲームを作るための勉強　その３５　HUD(Head Up Display）を追加する前にデバッグします

　ゲームエンジンGodot4.0で3Dスマホゲームを作りたいと思いますが、その前にお勉強しています。
　2023/4/4リリースのGodot_v4.0.2-stable_win64を使用しています。

# 目的
　ゲーム中の情報を２Dで表示する画面を追加していきますが、その前に今までの２Ｄ表示でスルーしてきた問題があるで解決していきたいと思います。

# ベースプロジェクト
　下記の記事を通して作成したプロジェクトをベースにしています。

https://qiita.com/FootInGlow/items/5bfc2c281638930fe10e

https://github.com/footinglow/Godot4/tree/main/02_study/S34ParticleSmoke

　github(Godotのプロジェクトマネージャーからインポートして利用できます）
　※別途ダウンロードが必要です。
　　　res://assets/texture/godot-material-dpa-1.0.1/Readme.txt及び
　　　res://assets/texture/AllSkyFree1.0/Readme.txtを参照

# 目的
　タイトルや設定パネルの2D表示にいくつか問題があるので解決します。

# 問題内容
（１）Androidエクスポートしたアプリをスマホで実行すると漢字が化ける
（２）Androidエクスポートしたアプリをスマホで実行するとタイトルのボタンが小さくなる
（３）設定パネルの角が透過していない
（４）設定パネルの表示のスライドバーの位置が異なる

# （１）Androidエクスポートしたアプリをスマホで実行すると漢字が化ける問題の対策
　GodotのWindows版を使用して、実行ボタンを押下すると漢字が表示されていたのでGODOTエンジンにdefaultの漢字フォントが組み込まれているのかと思っていましたが、Androidエクスポートしたapkファイルをスマホで実行すると漢字が化けていました。
　対策として漢字フォントファイルを追加して、ディフォルトのテーマとして設定します。

## 漢字フォントをダウンロードする
　Google Fontsを使用します。下記のWebサイトのダウンロードボタンを押下します。

https://fonts.google.com/noto/specimen/Noto+Sans+JP?noto.region=JP

　解凍します。
　サイズが大きいので使いたいフォント（NotoSansJP-Bold.ttf）とREADME.txt、OFL.txtを残して他は削除しました。
　S35HUB1がプロジェクトのトップフォルダです。
![スクリーンショット (683).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/17e19542-4fd1-0984-71ff-b321cc5b4e6a.png)
　GodotのWindowに切り替えると自動でインポートされます。
![スクリーンショット (684).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/62d9391d-692c-ffa0-b356-a39c7b060a57.png)

　プロジェクトメニューのプロジェクト設定を実行します。
　右上の「Advanced Setings」がONになっていることを確認して、GUI/テーマを選択します。
　Custom Fontsの右側のフォルダアイコンをクリックします。
![スクリーンショット (685).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/7880fa4d-e261-c4fd-202c-e358cc24cf7b.png)
　「NotoSansJP-Bold.ttf」を選択します。
![スクリーンショット (686).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/25913c0e-fdff-0ab1-8128-e4031165f7f7.png)
　「保存して再起動」ボタンを押下して、フォントを有効します。
![スクリーンショット (687).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/07549ef5-aa3e-5546-3352-4c23ba83f62e.png)
　実行して、タイトルや設定パネル内のフォントが変わったことを確認しましょう。
　またAndroidエクスポートしたapkファイルをスマホにインストールして実行します。漢字が文字化けせず表示されることを確認します。

# （２）Androidエクスポートしたアプリをスマホで実行するとタイトルのボタンが小さくなる問題の対策
　プロジェクトメニューのプロジェクト設定を実行します。
　表示/ウインドウのストレッチ/モードを「canvas_items」に変更します。
![スクリーンショット (688).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/832992e7-9e1e-1e4b-fd06-c4652e9d8a2b.png)
　Androidエクスポートしたapkファイルをスマホにインストールして実行します。ボタン、設定パネルのサイズがエディットした画面の時と同じような比率になっていることを確認します。

:::note
 モードをcanvas_itemsもしくはviewportにすると、実行環境ウインドウのピクセルサイズが変わっても、適切なサイズで描画するようになります。
![スクリーンショット (689).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/87539a7a-3707-d770-72be-95d1723fcdfb.png)
 viewportと比べてcanvas_itemsの方がパフォーマンスが良く、良い結果が得られると書いてるので、不都合（処理が重いなど）が発生するまではcanvas_itemsを使用します。
>Godot Engine 4.0 documentation in English
> /All classes/Window
>https://docs.godotengine.org/en/latest/classes/class_window.html#enum-window-contentscalemode
:::

# （３）設定パネルの角が透過していない問題の対策
　設定パネルの角が透過されていませんでした。
![スクリーンショット (690).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f258dee4-6ebf-f307-76b3-e2cf39495ff6.png)

　 res://settings_popup_panel.tscnを開きます。ルートノードの「SettingsPopupPanel」を選択して、インスペクターのViewport/Transparent BGをオンに設定します。
![スクリーンショット (691).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2d4846b0-17a2-b474-188c-02ed6e7eb6ec.png)
　設定パネルの角が透過するようになりました。
![スクリーンショット (692).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/abeedddc-34f6-f475-4048-f4942eaddf03.png)

# （４）設定パネルの表示のスライドバーの位置が異なる
　設定ボタンを押下したときの初期表示が、「発射1秒」と書いてあるのにスライドバーは一番左の0.1秒に設定されています。スライドバーは一番左が0.1秒、一番右が1.0秒です。
res://settings_popup_panel.gdを開いて、openメソッドの最後に2行追加します。

```GDScript
func open():
	get_tree().paused = true
	popup_centered()
	$ControlBaseSize/VBoxContainer/MarginContainer2/HSlider.value = GlobalSettings.m_firing_timing_sec
	_on_h_slider_drag_ended(true)
```

* **$ControlBaseSize/VBoxContainer/MarginContainer2/HSlider.value = GlobalSettings.m_firing_timing_sec**
　GlobalSettings.m_firing_timing_secは、シングルトン（自動読み込み）としてAutoloadに登録したスクリプトの中に定義した発射間隔の設定値です。
　設定パネルをopenする時に、この値をスライダーの初期値に設定します。
　また表示文字列を変更したいので、_on_h_slider_drag_ended()メソッドを呼ぶことで表示を更新します。
　シングルトン（自動読み込み）としてAutoloadに登録したスクリプトについては下記記事参照

https://qiita.com/FootInGlow/items/1b62221a35c06269d006



　設定ボタンを押下したときの初期表示で、スライダーの位置と表示秒数が合っていることを確認します。
![スクリーンショット (693).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/50091896-bde2-ac14-bd9a-9f48b0a69dbf.png)

以上