0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-03-28

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

目的

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

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

ベースプロジェクト

 下記で作成したプロジェクトをベースに機能追加をします。
 【Godot 4.0】スマホ3Dゲームを作るための勉強 その28 テクスチャを設定する
 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

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

「Epic_BlueSunset_EquiRect_flat.png」テクスチャを配置する

 assets/texture/AllSkyFree1.0フォルダを作成してEpic_BlueSunset_EquiRect_flat.pngを配置しました。
スクリーンショット (403).png
 GodotのWindowに切り替えると自動でインポートされます。
スクリーンショット (404).png

半径100mの球を配置する

 地面ステージアイテムに背景の空を設定します。
 res://StageItems/ground.tscnを開きます。
 ルートノードの「Ground」を右クリックして、子ノードを追加からMeshInstance3Dを追加します。
 「BackgroundSky」に名称を変更します。
スクリーンショット (395).png

ゲームステージに対して十分大きな球を追加する

 「BackgroundSky」を選択した状態で、インスペクタのMeshInstance3D/Meshの<空>をクリックして、新規SphereMesh3Dを選択します。
 Meshの右に設定された球をクリックして詳細設定を開きます。
 ゲームのステージ(5m×15m)に比べて十分大きな球にしたいので、Radiusを100mに、Heightを200mに設定します。
 スクリーンショット (396).png

空のテクスチャを球の内側に設定する

 「BackgroundSky」を選択した状態で、インスペクタのMeshInstance3D/Meshの右に設定された球をクリックして詳細設定を開きます。
 Materialの右の<空>をクリックして、新規StandardMaterial3Dを設定します。
スクリーンショット (397).png
 Materialの右に設定された球(型:StandardMaterial3D)をクリックして、Albedoを開きます。
 textureの右の<空>をクリックして、「クイックロード」を選択します。
 「assets/texture/AllSkyFree1.0/Epic_BlueSunset_EquiRect_flat.png」を開きます。
スクリーンショット (405).png

 球の外側に空のテクスチャが設定されました。
 この場合球の内側に視点を移動すると、テクスチャが見えなくなります。
スクリーンショット (407).png

 テクスチャを内側に貼るには、Material/Transparency/Cull Modeを「Front」に設定します。
 小さいですが、ゲームの緑の地面の下に空が見えています。
スクリーンショット (408).png

MeshInstance3D/Meshの詳細設定の「Flip Face」をオンにしても同じ効果が得られるようです。
スクリーンショット (417).png

 空のテクスチャの地面側は暗いので、X軸周りに180度回転して地面の下側を青空にします。
 シーンのBackgroundSkyを選択して、Node3D/Transform/RotationのXを180にします。
スクリーンショット (415).png

背景を回転する

 シーンの「BackgroundSky」を右クリックして、「スクリプトをアタッチ」を実行します。
 res://StageItems/BackgroundSky.gdとして保存します。
スクリーンショット (413).png
 保存されました。
スクリーンショット (414).png

 Y軸を回転するようにスクリプトを記述します。

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

スマホアプリの表示を確認する(2023/3/30追記)

 Androidアプリで表示すると暗くなる問題がわかりましたので暫定対処します。

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

 まず表示を確認するため、右上に表示されているレンダラー「Forward+」をクリックして、Mobileに変更します。
スクリーンショット (485).png
 保存して再起動します。
スクリーンショット (486).png
 Androidスマホで実行した場合の表示になりました。このくらい暗くなります。
スクリーンショット (487).png

 res://StageItems/ground.tscnを開いて、BackgroundSkyを選択した状態で、インスペクタのMeshInstance3D/Meshの詳細設定のさらにMaterialの詳細設定を開きます。
 Transparency/Transparencyを「Alpha」に変更すると表示が明るくなります。
スクリーンショット (489).png

以上です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?