【Godot 4.0】スマホ３Dゲームを作るための勉強　その２９　ゲームの背景に空のテクスチャを貼ります

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

# 目的
　背景を設定します。
　半径100mの大きな球の内側に空のテクスチャを貼り付けます。

:::note
　2023/3/30追記　大きな球の内側に青空のテクスチャを貼り付けると、Windowsアプリ（レンダラーがForward＋）の場合は良いのですが、Androidスマホで実行（レンダラーがmobile)にすると暗くなる問題があることがわかりました。
　暫定対処で、Transparencyをalphaにするように記事を修正しましたが、WorldEnvironmentを使用したほうが自然になるので、別記事で変更したいと思います。
:::

# ベースプロジェクト
　下記で作成したプロジェクトをベースに機能追加をします。
　【Godot 4.0】スマホ３Dゲームを作るための勉強　その２８　テクスチャを設定する
　https://qiita.com/FootInGlow/items/90bc94b06a8fda667fe6
　
　github(Godotのプロジェクトマネージャーからインポートして利用できます）
　https://github.com/footinglow/Godot4/tree/main/02_study/S28UseTexture
　※別途ダウンロードが必要です。res://assets/texture/godot-material-dpa-1.0.1/Readme.txtを参照。

# 背景に空を設定します。
　Godot アセットの「AllSky Free」を使用します。MITライセンスです。
　https://godotengine.org/asset-library/asset/579
![スクリーンショット (389).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/4ce77482-8898-bf8d-3683-c872e6b6602a.png)

　ダウンロードして、解凍します。
　「Epic_BlueSunset_EquiRect_flat.png」を使用します。

## 「Epic_BlueSunset_EquiRect_flat.png」テクスチャを配置する
　assets/texture/AllSkyFree1.0フォルダを作成してEpic_BlueSunset_EquiRect_flat.pngを配置しました。
![スクリーンショット (403).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/90652ebd-0f78-9824-b63c-a5f483ba239e.png)
　GodotのWindowに切り替えると自動でインポートされます。
![スクリーンショット (404).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/3f9a817a-32b9-8e33-d22c-70a9f55539cb.png)

## 半径100mの球を配置する
　地面ステージアイテムに背景の空を設定します。
　res://StageItems/ground.tscnを開きます。
　ルートノードの「Ground」を右クリックして、子ノードを追加からMeshInstance3Dを追加します。
　「BackgroundSky」に名称を変更します。
![スクリーンショット (395).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/3570086e-bc97-6633-760d-7d39b9d604c4.png)

## ゲームステージに対して十分大きな球を追加する
　「BackgroundSky」を選択した状態で、インスペクタのMeshInstance3D/Meshの＜空＞をクリックして、新規SphereMesh3Dを選択します。
　Meshの右に設定された球をクリックして詳細設定を開きます。
　ゲームのステージ(5m×15m）に比べて十分大きな球にしたいので、Radiusを100mに、Heightを200mに設定します。
　![スクリーンショット (396).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/6303550a-048f-6e48-4567-df6b82272719.png)
## 空のテクスチャを球の内側に設定する
　「BackgroundSky」を選択した状態で、インスペクタのMeshInstance3D/Meshの右に設定された球をクリックして詳細設定を開きます。
　Materialの右の＜空＞をクリックして、新規StandardMaterial3Dを設定します。
![スクリーンショット (397).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a7f31f83-cd0d-d244-65cc-104cc0d4fdea.png)
　Materialの右に設定された球（型:StandardMaterial3D)をクリックして、Albedoを開きます。
　textureの右の＜空＞をクリックして、「クイックロード」を選択します。
　「assets/texture/AllSkyFree1.0/Epic_BlueSunset_EquiRect_flat.png」を開きます。
![スクリーンショット (405).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/ff25bf05-56d0-b75b-0a42-477964546692.png)

　球の外側に空のテクスチャが設定されました。
　この場合球の内側に視点を移動すると、テクスチャが見えなくなります。
![スクリーンショット (407).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/4d447e09-27c6-0c3a-3245-4ad1ebd4f5d6.png)

　テクスチャを内側に貼るには、Material/Transparency/Cull Modeを「Front」に設定します。
　小さいですが、ゲームの緑の地面の下に空が見えています。
![スクリーンショット (408).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2c9205c4-6b09-a9d5-b146-d0084101132f.png)

:::note
 MeshInstance3D/Meshの詳細設定の「Flip Face」をオンにしても同じ効果が得られるようです。
![スクリーンショット (417).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/0189a6ec-9a6b-e594-98db-9d6d75fb809a.png)
:::

　空のテクスチャの地面側は暗いので、X軸周りに180度回転して地面の下側を青空にします。
　シーンのBackgroundSkyを選択して、Node3D/Transform/RotationのXを180にします。
![スクリーンショット (415).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/75044574-050a-819c-d117-712d1260c648.png)

## 背景を回転する
　シーンの「BackgroundSky」を右クリックして、「スクリプトをアタッチ」を実行します。
　res://StageItems/BackgroundSky.gdとして保存します。
![スクリーンショット (413).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/8a97dc77-03e8-a6fe-00c8-06983b5141b2.png)
　保存されました。
![スクリーンショット (414).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/82e24b43-9e8c-261f-078b-4a7f055c3ae2.png)

　Ｙ軸を回転するようにスクリプトを記述します。
```GDScript
extends MeshInstance3D

@export var m_d_speed_degps = 1		# 回転速度 [degree/sec]

func _physics_process(delta):
	rotate_y( deg_to_rad(m_d_speed_degps) * delta)
```
　背景は物理演算は関係ないので_processでもよいです。

# 実行
　実行するとゲーム画面の背景が空になり、ゆっくり回転します。
![スクリーンショット (418).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/1236663f-9d84-44b3-f207-32ff32dad2db.png)

## スマホアプリの表示を確認する(2023/3/30追記）
　Androidアプリで表示すると暗くなる問題がわかりましたので暫定対処します。

:::note
　なぜこの対応で表示が明るくなるのか理解していないので、暫定対処としています。
　またWorldEnvironmentを使用したほうが正しい対応のようですので、別記事で修正する予定です。
:::

　まず表示を確認するため、右上に表示されているレンダラー「Forward+」をクリックして、Mobileに変更します。
![スクリーンショット (485).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/577f32c8-ea15-659a-777d-8db9f4b9d14e.png)
　保存して再起動します。
![スクリーンショット (486).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a42f16b7-fb29-6a28-3ab1-1d280f556986.png)
　Androidスマホで実行した場合の表示になりました。このくらい暗くなります。
![スクリーンショット (487).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/57597d71-b5a5-cd20-2824-772ac23ef49b.png)

　res://StageItems/ground.tscnを開いて、BackgroundSkyを選択した状態で、インスペクタのMeshInstance3D/Meshの詳細設定のさらにMaterialの詳細設定を開きます。
　Transparency/Transparencyを「Alpha」に変更すると表示が明るくなります。
![スクリーンショット (489).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a44e5c72-c117-28fb-f567-f8a2dde7073b.png)

以上です。