OnAsyncLoadingFlushUpdateを使ったローディング画面

#ローディング画面の実装
レベルの遷移など大量のアセットをロードするときに何も考えずにアセットをロードすると画面が固まってしまい格好悪いので一般的には**ローディング画面**を表示し準備が整ったら表示を開始します。
この実装方法はいくつかあります。代表的なものを並べてみましょう。

##1.ローディング用レベルを経由する

1. 移動前のレベルからローディング画面に遷移<br>
この時可能であればローディング画面のアセットを事前にロードしておくと素早く移動できます。
2. 軽量なローディング画面に遷移
3. 次のレベルで必要なアセットのリストを準備しておき、必要なアセットをすべて非同期ロードで読み込む<br>
画面の描画内容に制限はありません。レベルを読み込む場合はレベルを読み込んだ時に作られるUWorldをGCされないようにガードしておく必要があります。
4. アセットをすべて読み込み終わったら次のレベルへの移動をリクエストします。

次のレベルで必要なアセットの組み合わせが動的に組み代わり、さらに事前に必要なアセットが明解な場合に有用です。
予めアセットがメモリ上にあればレベルの移動はかなり短縮されます。
非同期のローディングには[Asset Managerを用いたローディング](https://qiita.com/EGJ-Kaz_Okada/items/f18bca3fb5c8fc1aea9c)がお手軽でお勧めです。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/a83f6485-9dae-a46f-6ac5-058a6831fab8.png)


##2.AsyncLoadingScreenを使う

こちらのプレゼンテーションが詳しいです。
https://www.slideshare.net/EpicGamesJapan/ss-135771323

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/05ae0a54-d033-f1e5-0f57-8d8840709e67.png)


レベルをロードしている間スレートの描画を別スレッドで行う実装です。
FDefaultGameMoviePlayerが肝です。
レンダリングを行うスレッドが入れ替わるような動作を行うため、レンダリング用APIなどの下で問題が発生するケースが少々見受けられます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/90ab922b-8bd7-c5d7-256a-f211d82ceadd.png)


##3.サブレベルのストリーミングを使う
ほぼ空のパーシスタントレベルに移動した後、サブレベルとしてアセットを非同期読み込みします。
公式ドキュメントレベルストリーミングをご参照ください
https://docs.unrealengine.com/ja/Engine/LevelStreaming/index.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/5f0f7ec3-7c1b-0ade-c8e7-d42cb2b71be0.png)


##4.プラットフォームが持っているローディングスクリーンを使う
VRプラットフォームではメジャーな方法です。
<font color="Gainsboro">僅かなヒッチでも酔いを引き起こしかねないため、厳しくチェックされます。それを通過するために滅茶苦茶お世話になります。</font>


#この記事で紹介したい上記以外の実装方法の一つ

今回ご紹介する実装はAsyncLoadingScreenに近いです。
重要な点としては、

・GameViewportClientにWidget(Slate)を設定して描画し、レベルの移動。
・**普通にWidgetを表示してブロッキングロードするとGameThreadが回っていないため画面が止まってしまう！**
・なんとかしてローディング中も画面を更新したい・・・！そうだ！**OnAsyncLoadingFlushUpdate**を使おう！

というところです。

図にするとこんな感じでGameThreadで実行されているFlushLoading(ロードが終わるまで待つ処理)から定期的に呼び出されるデリゲートでSlateを更新していきます。
図の中の赤線がデリゲートの呼び出しのイメージを表しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/0a6a02bb-568a-ec80-98f8-813c82350a3c.png)
サンプルプロジェクトを公開させていただきますのでご興味のある方はアクセスしてみてください。

#リポジトリ
プロジェクトはgithubにアップロードされています。
https://github.com/wankotank/SimpleLoadingScreen
ローカルに展開してUE4.25で開いてください。

#プロジェクト解説
コードを見てもらうのが手っ取り早いです。重要点だけ解説します。

##まず重要な設定

AsyncLoadingThreadは必須なので必ず設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/799310dc-03c4-dda2-3fa9-4766af4b5a05.png)

##FSimpleLoadingScreenSystem

###ローディング中に呼び出されるデリゲートを登録します。

```c++:SimpleLoadingScreenUtility.cpp
FSimpleLoadingScreenSystem::FSimpleLoadingScreenSystem( UGameInstance* InGameInstance )
	:GameInstance( InGameInstance )
{
	FCoreDelegates::OnAsyncLoadingFlushUpdate.AddRaw(this, &FSimpleLoadingScreenSystem::OnAsyncLoadingFlushUpdate);
}
```


### 進行状況の取得 GetLoadingProgress
この関数はGetAsyncLoadPercentageを用いてロードの進捗を取り出します。
GetAsyncLoadPercentageは仕様上細かい数字を返しません。
サブレベル毎でのロードの終了判定は正確なので、ある程度サブレベルに分割されているとより細かい進捗がとれるようになります

### デリゲート
ロード中に呼び出されるデリゲートの中から定期的にFSlateApplication::Get().Tick()を呼び出します。
このシンプルなローディングの肝です。
OnAsyncLoadingFlushUpdateと名前の通りAsyncLoadingThreadが有効でない場合はこれが呼び出されないので注意してください。

```c++:SimpleLoadingScreenUtility.cpp
/*このデリゲート関数はロード中に高頻度で呼ばれるので、適切な間隔でスレートの更新を呼ぶようにする*/
void FSimpleLoadingScreenSystem::OnAsyncLoadingFlushUpdate()
{
	check(IsInGameThread());

 	QUICK_SCOPE_CYCLE_COUNTER(STAT_LoadingScreenManager_OnAsyncLoadingFlushUpdate);

	const double CurrentTime = FPlatformTime::Seconds();
	const double DeltaTime = CurrentTime - LastTickTime;
	if (DeltaTime > 1.0f/60.0f )
	{
		LastTickTime =  CurrentTime;
		if( bShowing ){
			// スレート更新
			FSlateApplication::Get().Tick();

			{
				TGuardValue<int32> DisableAsyncLoadDuringSync(GDoAsyncLoadingWhileWaitingForVSync, 0);
				FSlateApplication::Get().GetRenderer()->Sync();
			}
		}

		LastTickTime =  CurrentTime;
	}
}
```

##USimpleLoadingScreenLibrary
ブループリントから関数を呼び出すためのブループリントライブラリクラスです。

##GameInstance
FSimpleLoadingScreenSystemはゲームインスタンス内で実体を作成し保持しておく必要があります。
Slate(UMG)の更新時はWorldが無い状態もありえるためGameInstanceを介してシステムにアクセスします。

##エディター内
###レベル内でのShow/Hideの呼び出し
ブループリントで実装しています /Game/BP_TravelToNextLevelWithLoadingScreen を参考にしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/77a3f0bf-76db-a6ff-6867-c238ff9b701a.png)
このブループリントをレベルにポンと置いています。

#動作例

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">サブレベル分割して<br>ちょっとコード書き直したら割と良い感じになった。やるじゃん俺。<br>GetSubLevelsStatus()にDLLリンケージがついてなくて不貞寝するところだったけど歯を食いしばった。 <a href="https://t.co/wwo9cPUnI6">pic.twitter.com/wwo9cPUnI6</a></p>&mdash; Takashi.Suzuki (@wankotank) <a href="https://twitter.com/wankotank/status/1321845924256116736?ref_src=twsrc%5Etfw">October 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#UnrealInsightで動作を確認。
AsyncLoadingThreadが動いている間、GameThreadはGameThreadでしかできない処理をしながらロードが終わるのを待ちますが、
その間に定期的にSlate::Tickが呼び出されていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/f9758a0e-50c9-a340-4d8e-560e495d4185.png)

#検索用
ローディングスクリーン
LoadingScreen
AsyncLoadingScreen