ゲームエンジンGodot4.0で3Dスマホゲームを作りたいと思いますが、その前にお勉強しています。
2023/4/4リリースのGodot_v4.0.2-stable_win64を使用しています。
目的
ゲーム中の情報を２Dで表示する画面を追加していきますが、その前に今までの２Ｄ表示でスルーしてきた問題があるで解決していきたいと思います。
ベースプロジェクト
下記の記事を通して作成したプロジェクトをベースにしています。
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サイトのダウンロードボタンを押下します。
解凍します。
サイズが大きいので使いたいフォント（NotoSansJP-Bold.ttf）とREADME.txt、OFL.txtを残して他は削除しました。
S35HUB1がプロジェクトのトップフォルダです。
GodotのWindowに切り替えると自動でインポートされます。
プロジェクトメニューのプロジェクト設定を実行します。
右上の「Advanced Setings」がONになっていることを確認して、GUI/テーマを選択します。
Custom Fontsの右側のフォルダアイコンをクリックします。
「NotoSansJP-Bold.ttf」を選択します。
「保存して再起動」ボタンを押下して、フォントを有効します。
実行して、タイトルや設定パネル内のフォントが変わったことを確認しましょう。
またAndroidエクスポートしたapkファイルをスマホにインストールして実行します。漢字が文字化けせず表示されることを確認します。
（２）Androidエクスポートしたアプリをスマホで実行するとタイトルのボタンが小さくなる問題の対策
プロジェクトメニューのプロジェクト設定を実行します。
表示/ウインドウのストレッチ/モードを「canvas_items」に変更します。
Androidエクスポートしたapkファイルをスマホにインストールして実行します。ボタン、設定パネルのサイズがエディットした画面の時と同じような比率になっていることを確認します。
モードをcanvas_itemsもしくはviewportにすると、実行環境ウインドウのピクセルサイズが変わっても、適切なサイズで描画するようになります。
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
（３）設定パネルの角が透過していない問題の対策
設定パネルの角が透過されていませんでした。
res://settings_popup_panel.tscnを開きます。ルートノードの「SettingsPopupPanel」を選択して、インスペクターのViewport/Transparent BGをオンに設定します。
設定パネルの角が透過するようになりました。
（４）設定パネルの表示のスライドバーの位置が異なる
設定ボタンを押下したときの初期表示が、「発射1秒」と書いてあるのにスライドバーは一番左の0.1秒に設定されています。スライドバーは一番左が0.1秒、一番右が1.0秒です。
res://settings_popup_panel.gdを開いて、openメソッドの最後に2行追加します。
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に登録したスクリプトについては下記記事参照
設定ボタンを押下したときの初期表示で、スライダーの位置と表示秒数が合っていることを確認します。
以上