[UE5]BP_Sky_Sphereで夕焼けになる時間が早すぎる

# はじめに
この記事では、BP_Sky_SphereとBP_SunPositionを使って太陽の位置をシミュレートした際に、空が夕焼け色になる時間が早すぎることを対処していきます。

BP_Sky_Sphereはレガシーなシステムで、UE5からは[Volumetric Cloud](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/volumetric-cloud-component-properties-in-unreal-engine?application_version=5.3)と[Sky Atmosphere](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/sky-atmosphere-component-in-unreal-engine?application_version=5.3)による空描写に切り替わったらしいですが[[出典](https://gamemakers.jp/article/2022_09_26_17804/)]、VRテンプレートではUE5.5.0時点でもまだ使用されていました。

# この記事で扱うこと
[公式ドキュメント](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/geographically-accurate-sun-positioning-tool-in-unreal-engine?application_version=5.3)に従って太陽の位置を再現する設定にして（※1）東京タワーの緯度経度で2024年12月21日（冬至）に設定すると、午後2時くらいから空が夕焼け色に変わり始めます。

調整前（2024年12月21日午後3時）：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/af359ba9-b388-f367-056d-5df046545dfa.png)


さすがにこれでは夕焼けになる時間が早すぎるので、現実の空の色の変化にできるだけ近づけていきます。

調整後（2024年12月21日午後3時）：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/673d5b9e-53dc-d45a-9954-2a7bc5f22f68.png)



※1：VRテンプレートのデフォルトの状態では、BP_Sky_Sphere（SkySpherePC2）のDirectional Light Actorに値が入っていなかったので、ここにレベル上のDirectionalLightを設定してあげないと太陽の位置が変化しないので注意
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/d14bd03c-5382-5897-7002-3db5f042eb7e.png)

# 手順
## BP_Sky_Shereの継承と設定

BP_Sky_Shereの子ブループリントを作成します。
名前は「BP_Sky_Shere_Custom」としました。
（エンジンフォルダ内に作られるので、作成後にコンテンツフォルダ下へ移動させておきましょう。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/863efd20-53f9-128e-108b-d22a16a76ed9.png)

作成したBP_Sky_Shere_Customをレベル内に配置して、設定していきます。
BP_Sky_Shere_Customの詳細にあるDirectional Light Actorにレベル上のDirectionalLightを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/f5b71839-77d2-55e7-9d0e-af3ebe2c5a0b.png)


BP_SunPositionを選択し、詳細のSky SphereをBP_Sky_Shere_Customに変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/e9858e21-3547-ce85-1003-c496efc80a27.png)


SkySphere2は不要なので、削除します。

## カラーカーブの複製

続いて作成したBP_Sky_Shere_Customを開きます。
詳細に表示されている3つのカラーカーブが今回の主役となる、太陽の高さに応じて空の色を変える部分になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/88cf6868-c25b-b26d-483b-68dfd7505804.png)

これらのファイルもBP_Sky_Shereと同じエンジンフォルダにあるので、改修するために複製します。
（Shift+クリックで3ファイルを選択 → Ctrl+Cでコピー → コンテンツフォルダ下の任意のフォルダを表示 → Ctrl+Vで貼り付け の操作で複製しました。また、誤ってエンジンコンテンツを変更しないように、名前の末尾に「_Custom」をつけて区別できるようにしました。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/c22615ef-8ad1-88dc-96c8-21752a5e742d.png)

複製したカラーカーブをBP_Sky_Shere_Customに適用しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/1f1bfd8d-23c5-4d64-be9a-0440102106cb.png)

## 空の色を調整

複製したカラーカーブを変更して、空の色を調整していきます。

Copilot先生が仰るには、夕焼けは日没の30～45分前くらいから、空が明るくなり始めるのは日の出の1時間半前くらいかららしいので、このくらいになるように調整しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/16dfe0e7-a8cd-d4a8-363e-8161c9b2a280.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/80f02289-02bf-eea0-abb6-09169ff2a46b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/70ad20fa-642a-aff9-8408-84fbff2aeef5.png)

それぞれ下記のように変更しました。
赤青緑の3つのカーブの縦に並ぶ各点をマウスドラッグで選択し、横軸の値を数値で入れていきました。
（数が多いので細かな数値を載せるのは割愛）

これが正解というわけではないので、より良い設定値があれば教えてください。

### C_Sky_Cloud_Color
雲の色味

Before:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/3c209236-f4f5-a745-1564-510722a04ebd.png)

After:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/4413f060-7520-af63-607a-b5c56c864879.png)

### C_Sky_Horizon_Color
地平線付近の空の色味

Before:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/91a5b481-056d-b660-1418-716b7468315a.png)

After:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/6790bf83-8932-eed2-ac0f-26f01a375d60.png)

### C_Sky_Zenith_Color
地平線以外の空の色味

Before:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/60022ae9-ae93-fee7-5d5c-8dd47c71d777.png)

After:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/1e2f4107-082c-6313-fb3b-c190b8f4091d.png)

# 参考サイト

https://eco.mtk.nao.ac.jp/koyomi/dni/dni13.html

https://qiita.com/NaoTel38/items/0162d34930dfee6392d4