【Godot 4.0】スマホ３Dゲームを作るための勉強　その２４　Androidアプリケーションとしてエクスポートする・調整する

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

# 目的
　Androidアプリケーションとしてエクスポートします。

# ベースプロジェクト
　下記で作成したプロジェクトをベースに機能追加をします。
　【Godot 4.0】スマホ３Dゲームを作るための勉強　その２３　ゲームシステムを作る　その８　設定を保存する
　https://qiita.com/FootInGlow/items/1b62221a35c06269d006
　
　github(Godotのプロジェクトマネージャーからインポートして利用できます）
　https://github.com/footinglow/Godot4/tree/main/02_study/S23_GameSystem_008

# Androidアプリケーションとしてエクスポートしようとすると...
　いざAndroidアプリケーションをエクスポートしようとするといくつか問題が発生しました。
　スマホ3Dゲームを作る...としながらWindowsアプリ版のみで動作確認していて、スマホ動作確認をおこたっていました。
　以下問題点と対策を簡単にまとめて、詳細に説明していきます。

:::note
* **Android apkファイルをエクスポートできない**
　エクスポートしようとすると「無効なパッケージ名」というエラーを指摘されます。
　プロジェクト設定/構成の名前にアンダースコアが入っているのがダメなようです。
　("S24_AndroidAppExport"のような名称を使っていました）

* **アプリが起動しない**
　エクスポートしたapkファイルをAndroidスマホにインストールして実行しても起動しません。真っ暗な画面のまま、もしくは落ちます。
　その１０くらいからひとつずつ確認したところ、敵の砦にCSGMesh3Dを追加したところで起動しなくなることがわかりました。
　かわりにCSGCylinder3D、CSGSphere3D、CSGBox3Dなどを使用すると起動することがわかりました。

* **ボタンをタッチできない**
　「Start Game!」や「設定」ボタンをタッチしても反応しません。
　プロジェクト設定の入力デバイス/ポインティングの「タッチでマウス操作をエミュレート」をオンにするとボタンが効くようになりました。
:::

　以下詳細に説明します。
# Android apkファイルをエクスポートできない問題の対応
　エクスポートの画面（プロジェクトメニューから「エクスポート」実行後、「追加」ボタンからAndroidを追加）の下の方に「無効なパッケージ名」というエラーが表示されて、「プロジェクトのエクスポート」ボタンが押せません。
![スクリーンショット (138).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/7f0d4130-4289-2bdd-3aaa-9399314e6b45.png)
　プロジェクト設定/構成の名前にアンダースコアが入っているとこのエラーになるようです。
　（エクスポート画面を閉じて）プロジェクトメニューからプロジェクト設定を開き、アプリケーション/構成の名前を確認します。
　この名前にアンダースコアが含まれているとだめなので修正します。
　androidパッケージ名は先頭は英字で2文字目から数字とアンダースコアが使えるようですので、Godotのルールなのでしょうか？
![スクリーンショット (139).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f08e9945-4911-cd71-e403-c3806115a682.png)
　アンダースコアを削除しました。
![スクリーンショット (141).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/068b71c1-be7e-6e2d-0bf9-7e0c3329a41e.png)
　
　プロジェクトメニューからエクスポート画面を表示すると、画面下部のエラーが消えて、「プロジェクトのエクスポート」ボタンが押下できるようになりました。apkファイルも生成できました。
　![スクリーンショット (142).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/31e51162-4708-9581-b92e-be777390bbf0.png)

# アプリが起動しない問題の対処
　apkファイルをAndroidスマホにインストールして実行すると、画面が真っ黒のままでしばらくすると落ちてしまいました。
　調査したところCSGMesh3Dを使用すると正常に動かないことがわかりました。
　CSGCylinder3D、CSGSphere3D、CSGBox3Dに置き換えるとAndroidスマホで動作することがわかったので、変更していきます。

## CSGMesh3DをCSGCylinder3D、CSGSphere3D、CSGBox3Dなどに置き換える
　CSGMesh3Dを使用しているのは敵の砦のデザインです。

　res://Design/design_enemy_fort.tscnを開きます。
　OuterWallとその子ノードがCSGMesh3Dを使用しています。（FlagPole,FlagはMeshInstance3Dなのでそのままで大丈夫です)
![スクリーンショット (144).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/ae09d231-9ad7-a1e9-9e44-a0dce3df0e6f.png)

### OuterWall（外壁）はCSGCylinder3Dに変更する
　OuterWallを右クリックして、「型を変更」を実行します。
![スクリーンショット (145).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f908d9a9-9dae-62d9-5648-29ff8d2a07db.png)
CSGCylinder3Dを選択します。
![スクリーンショット (147).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/151fff9a-ecb1-1329-9fd2-b619baeb881e.png)
　OuterWallを選択した状態でインスペクタの「CSGCylinder3D/Height」を1.5mに設定します。
![スクリーンショット (148).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/ead40e9b-dd39-6306-dc61-3083c1d525a3.png)

　Materialも設定します。
　インスペクタのCSGCylinder3D/Materialの＜空＞をクリックして、「クイックロード」を実行します。
![スクリーンショット (150).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/d31652a7-1efa-0c9b-5128-6ad2b0dc7d22.png)
敵の砦のtresファイル「Design/design_enemy_fort.tres」を選択します。
![スクリーンショット (152).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/3d60900a-61d8-6e4e-e8e3-7d5d60662084.png)
設定されました。
![スクリーンショット (153).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/4b527c43-d490-b18a-5cca-87fe3f8c09f3.png)

### Ceiling（天井）はCSGSphere3Dに変更する
　Ceilingを右クリックして「型を変更」を実行し、CSGSphere3Dを選択します。
　![スクリーンショット (154).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/98aa6943-8778-68fe-d521-7ac1a4f37fc9.png)

:::note
　一見このままでよいように見えますが、CSGMesh3Dの表示のごみが残っているだけでした。
　シーン内のOuterWallの右の「目」のアイコンをクリックして非表示/表示とすると正しい？表示に代わるようです。
![スクリーンショット (156).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/18ec9a4a-b90c-4cd9-ae0f-e121cd9b7385.png)
:::

　正しく表示するとCeiling（天井）がめり込んでいます。少し上に移動しましょう。
![スクリーンショット (158).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/d5e66d77-7bf7-30ec-0e78-cc2cdf4cafc0.png)
 Node3D/Transform/positionのyを0.75mに変更します。
![スクリーンショット (159).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/9255ffbc-54b7-2aab-3743-7a5f32e36f8a.png)

### Doorway（出入り口）はCSGBox3Dに変更する
　Doorwayを右クリックして、「型を変更」からCSGBox3Dを選択します。
　![スクリーンショット (160).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/979d61a1-2e26-9daa-68b3-60bc77d19c04.png)
　インスペクタのCSGBox3D/Sizeのxとzを0.4mに変更します。
![スクリーンショット (161).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/75c66044-e343-2e53-29ed-ccc37ab5611d.png)
　Node3D/Transsform/positionのyを-0.25mに変更します。(xは0m、zは0.5mのまま）
　OuterWallと違い、Materialの設定は残っていたのでそのままにしました。
![スクリーンショット (163).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/77f80040-ebe7-0e7e-a79d-8424bd10267a.png)

### Room（砦内の空間）はCSGCylinder3Dに変更する
　Roomを右クリックして、「型を変更」からCSGCylinder3Dを選択します。
![スクリーンショット (164).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/e41a12cc-fd10-9411-3ce7-8e4d981bfc9c.png)
　Roomを選択した状態で、インスペクタのCSGCylinder3DのRadiusを0.4m、Heightを1.5mに設定します。
![スクリーンショット (165).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/defbaeb1-27c6-0140-7bdf-9da50b3e2cd7.png)

　実行しましょう。CSGMesh3Dのときと比較して、あまり違和感はないと思います。
![スクリーンショット (169).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/db24630e-3440-6fe7-e46a-90e3b1510011.png)
　apkファイルをエクスポートして、Androidスマホで実行するとタイトル画面が表示されるようになったと思います。
　しかしボタンが反応しません。

# ボタンをタッチできない問題の対策
　「Start Game!」や「設定」ボタンをタッチしても反応しません。

　プロジェクトメニューからプロジェクト設定を開きます。
　入力デバイス/ポインティングの「タッチでマウス操作をエミュレート」をオンにするとボタンが効くようになりました。
　![スクリーンショット (166).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/97ae5133-9740-b6a7-a7da-c068b478f733.png)

# 画面が横向きのまま
　スマホで実行すると画面が横向きになりますので、縦になるように変更します。
　また解像度も縦長にします。

　プロジェクトメニューからプロジェクト設定を開きます。
　表示/ウィンドウを開きます。

* **サイズのビューポートの幅、ビューポートの高さを設定する**
　ビューポートの幅を500、高さを900にして縦長の画面サイズにしました。
　スマホの画素数に合わせて1000×2000にするとWindowsで実行したときに画面からはみ出すので、デバッグ中はWindowsの画面に収まるくらいにした方がよさそうです

* **ポータブルの方向を設定する**
　Portraitにすると、スマホで実行したときに縦に表示します。

* **ストレッチのアスペクトを確認する**
　keepになっていると思います。

![スクリーンショット (170).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/b343ccd7-0937-5f16-1c7e-7db34400162d.png)

# タイトル画面のコントロールの配置
　タイトル画面のコントロールの配置を修正します。
　
　res://title.tscnを開きます。
　ビューの高さと幅を変更したことによってコントロールの位置がずれてしまいましたが、そもそもControlを追加したときにControlのサイズも子コントロールのアンカーも設定していなかったのが問題でした。
![スクリーンショット (172).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/ac366f94-63c1-7e6d-fbde-55f1531a0390.png)

　Controlをビューと同じサイズに変更します。
　Controlを選択した状態で、「ビュー」メニューの右のアイコンをクリックして、右下の「Rect全面」のアイコンをクリックするとControlのサイズがビューと同じサイズになります。
　![スクリーンショット (173).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/26e6d0ed-4f6e-61f1-30cd-aabc4c7403ec.png)
　
　３つのコントロールのControlに対する位置を決めましょう。

* **ゲームタイトルのLabelはControlの中央上に配置する**
　シーン内のLabelを選択した状態で、「ビュー」メニューの右のアイコンをクリックして、「中央上」のアイコンをクリックすると「MyGame」のタイトルがControl内の中央上に移動します。
![スクリーンショット (175).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/47a9f42f-73d4-3880-85f9-eaf660705c02.png)

* **ボタンを大きくする**
　スマホでタッチするときにボタンが小さすぎたのでボタンを大きくします。
　シーン内の「Button」を選択して、インスペクタのContol/Layout/TransformのSizeのxを200pxに、yを100pxに設定します。SettingsButtonも同じサイズに設定します。
![スクリーンショット (178).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/6c96c9ba-a5bd-8610-dc5c-2dc0808d948f.png)

* **「Game Start!」ボタンはControlの左下に配置する**
　シーン内のButtonを選択した状態で、「ビュー」メニューの右のアイコンをクリックして「左下」のアイコンをクリックすると「Game Start!」ボタンがControl内の左下に移動します。
![スクリーンショット (185).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/878d0db9-a064-def3-4a83-9420242e1150.png)
* **「設定」ボタンはControlの右下に配置する**
　シーン内のSettingsButtonを選択した状態で、「ビュー」メニューの右のアイコンをクリックして右下をクリックすると「設定」ボタンがControl内の右下に移動します。

![スクリーンショット (179).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/90517d2b-9978-b482-1412-ebd9749063f2.png)

* **背景全体が見える様にカメラを引きます**
　res://title.tscnを開きます。
　画面上部3Dを押下します。
　シーン内のCamera3Dを選択して、「プレビュー」をチェックします。敵の砦がはみ出していますね。
![スクリーンショット (180).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/0d23e0c6-3e93-9008-6ee1-547c50f97841.png)
　Camera3Dを選択して、インスペクタのNode3D/Transform/positonのzを6mにしましょう。
![スクリーンショット (181).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/abde414a-c5b5-c338-7146-0d8d8c13cee8.png)

　実行します。Windowsアプリではよい感じで表示されました。
![スクリーンショット (182).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/af7cd190-a39b-f09b-6333-98d1280da187.png)

　スマホで実行するとボタンが小さいですね。ダイアログも小さいですが、別の機会に調整します。

　以上です。